如何使用flexbox在容器内水平和垂直居中div。在下面的示例中，我希望每个数字都位于彼此的下方（以行为单位），水平居中
.flex容器{
填充：0；
保证金：0；
列表样式：无；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
划船{
宽度：100%；
}
.弹性项目{
背景：番茄；
填充物：5px；
宽度：200px；
高度：150像素；
利润率：10px；
线高：150px；
颜色：白色；
字体大小：粗体；
字号：3em；
文本对齐：居中；
}<；div class=“柔性容器”>；
<；div class=“行”>；
<；span class=“弹性项目”>；1</span>；
</部门>；
<；div class=“行”>；
<；span class=“弹性项目”>；2</span>；
</部门>；
<；div class=“行”>；
<；span class=“弹性项目”>；3</span>；
</部门>；
<；div class=“行”>；
<；span class=“弹性项目”>；4</span>；
</部门>；
</部门>我想你想要以下的东西
html，正文{
身高：100%；
}
身体{
保证金：0；
}
.柔性容器{
身高：100%；
填充：0；
保证金：0；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.行{
宽度：自动；
边框：1px纯蓝色；
}
.弹性项目{
背景色：番茄；
填充物：5px；
宽度：20px；
高度：20px；
利润率：10px；
线高：20px；
颜色：白色；
字体大小：粗体；
字号：2em；
文本对齐：居中；
}<；div class=“柔性容器”>；
<；div class=“行”>；
<；div class=“弹性项目”>；1</部门>；
<；div class=“弹性项目”>；2</部门>；
<；div class=“弹性项目”>；3</部门>；
<；div class=“弹性项目”>；4</部门>；
</部门>；
</部门>请参见演示：http://jsfiddle.net/audetwebdesign/tFscL/
如果希望高度和顶部/底部填充正常工作，您的.flex项元素应该是块级（div而不是span）
另外，在.row上，将宽度设置为auto，而不是100%
您的.flex容器属性很好
如果希望.row在视图端口中垂直居中，请为html和body指定100%的高度，并将body边距归零
请注意，.flex container需要一个高度来查看垂直对齐效果，否则，容器将计算包含内容所需的最小高度，该高度小于本例中的视图端口高度
脚注：
flex-flow、flex-direction、flex-wrap属性可以使此设计更易于实现。我认为不需要.row容器，除非您想在元素（背景图像、边框等）周围添加一些样式
一个有用的资源是：http://demo.agektmr.com/flexbox/