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

【问题标题】：How do I center div horizontally and vertically within a div using flexbox?如何使用 flexbox 在 div 中水平和垂直居中 div？
【发布时间】：2014-09-02 18:46:37
【问题描述】：

如何使用 flexbox 在另一个 div 中居中（水平）和居中（垂直）div？

OtherQ/A exists，但是太具体了

【问题讨论】：

标签： html css layout flexbox

【解决方案1】：

jsFiddle

在 flexbox 中，将 margin 设置为 auto 将自动设置水平轴和垂直轴的边距。

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;
}

【讨论】：