如何使用CSS垂直居中文本？

Question

我有一个包含文本的div元素，我想将此div的内容垂直居中对齐。这是我的div风格：#box {  height: 170px;  width: 270px;  background: #000;  font-size: 48px;  color: #FFF;  text-align: center;}<div id="box">  Lorem ipsum dolor sit</div>做这个的最好方式是什么？

Answer 1

另一种方式（此处尚未提及）是Flexbox。

只需将以下代码添加到容器元素：

display: flex; justify-content: center; /* align horizontal */ align-items: center; /* align vertical */

Flexbox演示1

显示代码段

或者，代替通过所述内容对准容器，Flexbox的也可以居中一个柔性物品与自动余量 当在柔性容器只有一个挠性项（如在问题上面给出的例子）。

因此，要将flex项目水平和垂直居中，只需将其设置为 margin:auto

Flexbox演示2

显示代码段

注意：以上所有内容适用于将物品放置在水平行中时居中。这也是默认行为，因为默认情况下为flex-directionis 的值row。但是，如果flex-items需要在垂直列中进行布局，flex-direction: column则应在容器上设置主轴以将主轴设置为列，此外justify-content，align-items现在使用和属性相反，justify-content: center垂直align-items: center居中并 水平居中）

flex-direction: column 演示

显示代码段

一个开始使用Flexbox来查看其一些功能并获得最大浏览器支持语法的好地方是flexyboxes

此外，如今的浏览器支持非常好：caniuse

对于跨浏览器的兼容性display: flex和align-items，你可以使用以下命令：

display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex;
 -webkit-flex-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;