如何在Flexbox中垂直和水平居中元素
以下是两种一般的定心方案。
一个用于垂直对齐的伸缩项(flex-direction: column)，另一个用于水平对齐的伸缩项(flex-direction: row)。
在这两种情况下，居中div的高度可以是可变的，未定义的，未知的，等等。居中divs的高度并不重要。
下面是两者的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 */
}
DEMO
当伸缩项目水平堆叠时:
从上面的代码调整弯曲方向规则。
#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;
}
DEMO
将伸缩项的内容居中
伸缩格式化上下文的范围仅限于父子关系。伸缩容器的子容器以外的子容器不参与伸缩布局，并将忽略伸缩属性。本质上，flex属性不能在子属性之外继承。
因此，您总是需要将display: flex或display: inline-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; }
了解flex自动边距:对齐flex项目的方法(见方框#56)。
将多行伸缩项目居中
当一个伸缩容器有多行(由于换行)时，align-content属性对于跨轴对齐是必要的。
来自规范:
8.4. 包装柔性线:对齐内容
财产
控件中的align-content属性对齐伸缩容器的行
当十字轴上有额外空间时，使用Flex容器，类似于
justify-content如何在主轴中对齐单个项。
注意，此属性对单行伸缩容器不起作用。
更多细节在这里:flex-wrap如何与align-self, align-items和align-content一起工作?
浏览器支持
除了IE < 10，所有主流浏览器都支持Flexbox。一些最新版本的浏览器，如Safari 8和IE10，需要使用厂商前缀。要快速添加前缀，请使用Autoprefixer。更多细节在这个答案中。
针对旧浏览器的居中解决方案
关于使用CSS表和定位属性的另一个定心解决方案，请参阅这个答案:https://stackoverflow.com/a/31977476/3597276
