如何在容器中使用flexbox水平和垂直地居中div。在下面的例子中，我想要每个数字都在对方下面(在行中)，这是水平居中。
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
row {
width: 100%;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
<div class="flex-container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
http://codepen.io/anon/pen/zLxBo
结果:
CODE
HTML:
<div class="flex-container">
<div class="rows">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
}
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.rows {
display: flex;
flex-direction: column;
}
其中flex-container div用于垂直和水平居中你的行div，和行div用于分组你的“项目”，并在一个基于列的顺序。
我想你想要的东西是这样的。
html, body {
height: 100%;
}
body {
margin: 0;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.row {
width: auto;
border: 1px solid blue;
}
.flex-item {
background-color: tomato;
padding: 5px;
width: 20px;
height: 20px;
margin: 10px;
line-height: 20px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<div class="flex-container">
<div class="row">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
</div>
参见demo: http://jsfiddle.net/audetwebdesign/tFscL/
如果你想让高度和上下填充正常工作，你的.flex-item元素应该是块级(div而不是span)。
同样，在.row上，将宽度设置为auto，而不是100%。
你的.flex-container属性没问题。
如果你想要.row在视图端口中垂直居中，为html和body指定100% height，并将body边距归零。
请注意，.flex-container需要一个高度来查看垂直对齐效果，否则，容器将计算包含内容所需的最小高度，该高度小于本例中的视图端口高度。
补充说明:
flex-flow、flex-direction、flex-wrap属性可以使这个设计更容易实现。我认为.row容器是不需要的，除非你想在元素(背景图像、边框等)周围添加一些样式。
一个有用的资源是:http://demo.agektmr.com/flexbox/
