Flexbox：水平和垂直居中
如何使用 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>答案
我认为您想要类似以下的内容。
html, body {
height: 100%;
}
body {
margin: 0;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
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>参见演示： http：//jsfiddle.net/audetwebdesign/tFscL/
如果您希望高度和顶部 / 底部填充正常工作，则.flex-item元素应为块级（ div而不是span
另外，在.row ，将宽度设置为auto而不是100% 。
您的.flex-container属性很好。
如果您希望.row在视口中垂直居中，请为html和body指定 100％的高度，并将body边距设为零。
请注意， .flex-container需要一个高度才能看到垂直对齐效果，否则，容器将计算封装内容所需的最小高度，该最小高度小于此示例中的视口高度。
脚注：
flex-flow ， flex-direction ， flex-wrap属性可以使此设计更易于实现。我认为.row容器，除非您要在元素周围添加一些样式（背景图像，边框等）。
有用的资源是： http://demo.agektmr.com/flexbox/
如何在 Flexbox 中垂直和水平居中放置元素
以下是两个常规的居中解决方案。
一个用于垂直对齐的弹性项目（ flex-direction: column ），另一个用于水平对齐的弹性项目（ flex-direction: row ）。
在这两种情况下，居中 div 的高度可以是可变的，不确定的，未知的等。居中的 div 的高度无关紧要。
这是两者的 HTML：
<div id="container"><!-- flex container -->
<div class="box" id="bluebox"><!-- flex item -->
<p>DIV #1</p>
</div>
<div class="box" id="redbox"><!-- flex item -->
<p>DIV #2</p>
</div>
</div>CSS （装饰风格除外）
弹性物品垂直堆叠时：
#container {
display: flex; /* establish flex container */
flex-direction: column; /* make main axis vertical */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
height: 300px;
}
.box {
width: 300px;
margin: 5px;
text-align: center; /* will center text in <p>, which is not a flex item */
}
当伸缩项目水平堆叠时：
从上面的代码调整flex-direction
#container {
display: flex;
flex-direction: row; /* make main axis horizontal (default setting) */
justify-content: center; /* center items horizontally, in this case */
align-items: center; /* center items vertically, in this case */
height: 300px;
}
集中弹性项目的内容
弹性格式上下文的范围仅限于父子关系。子代以外的 flex 容器的后代不参与 flex 布局，并且将忽略 flex 属性。本质上，flex 属性不能在子级之外继承。
因此，您始终需要将display: flex或display: inline-flex应用于父元素，以便将 flex 属性应用于子元素。
为了使 flex 项目中包含的文本或其他内容垂直和 / 或水平居中，请将项目设为（嵌套的）flex 容器，然后重复居中规则。
.box {
display: flex;
justify-content: center;
align-items: center; /* for single line flex container */
align-content: center; /* for multi-line flex container */
}此处有更多详细信息：如何在 Flexbox 中垂直对齐文本？
或者，您可以将margin: auto应用于弹性项目的 content 元素。
p { margin: auto; }在此处了解有关柔韧性auto边距的信息：对齐柔韧性项目的方法（请参见框＃56）。
将多行弹性项目居中
当 flex 容器有多行（由于包装）时， align-content属性对于跨轴对齐将是必需的。
从规格：
当横轴上有多余的空间时，
align-content属性将伸缩容器内的行对齐在伸缩容器内，这与justify-content在主轴内对齐单个项目的方式类似。注意，此属性对单行 flex 容器无效。
此处有更多详细信息： flex-wrap 如何与 align-self，align-items 和 align-content 一起使用？
浏览器支持
除了 IE <10 以外，所有主流浏览器都支持 Flexbox。某些最新的浏览器版本（例如 Safari 8 和 IE10）需要供应商前缀。要快速添加前缀，请使用Autoprefixer 。此答案中有更多详细信息。
旧版浏览器的居中解决方案
有关使用 CSS 表和定位属性的替代居中解决方案，请参见以下答案： https://stackoverflow.com/a/31977476/3597276