如何使用flexbox在div內水平和垂直居中放置div？

Question

如何使用flexbox在另一個div內將div居中（水平）和中間（垂直）？

存在 其他 Q / A，但過於具體

Answer 1

jsFiddle

在flexbox中，將margin設置為auto會自動為水平和垂直軸設置margin。

的HTML

<div class="parent">
    <div class="child">
    </div>
</div>

的CSS

html, body {width:100%;height:100%;}
.parent {
    display: flex;
    width: 100%;
    height: 100%;
    border: 5px solid red;
}

.child {
  width: 100px;
  height: 100px;
  margin: auto; /* Auto margin for both horizontal and vertical axis */
  border: 5px solid blue;
}