如何使用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:&nbsp;flex;&nbsp;justify-content:&nbsp;center;&nbsp;/*&nbsp;align&nbsp;horizontal&nbsp;*/&nbsp;align-items:&nbsp;center;&nbsp;/*&nbsp;align&nbsp;vertical&nbsp;*/Flexbox演示1显示代码段或者，代替通过所述内容对准容器，Flexbox的也可以居中一个柔性物品与自动余量&nbsp;当在柔性容器只有一个挠性项（如在问题上面给出的例子）。因此，要将flex项目水平和垂直居中，只需将其设置为&nbsp;margin:autoFlexbox演示2显示代码段注意：以上所有内容适用于将物品放置在水平行中时居中。这也是默认行为，因为默认情况下为flex-directionis&nbsp;的值row。但是，如果flex-items需要在垂直列中进行布局，flex-direction: column则应在容器上设置主轴以将主轴设置为列，此外justify-content，align-items现在使用和属性相反，justify-content: center垂直align-items: center居中并&nbsp;水平居中）flex-direction: column&nbsp;演示显示代码段一个开始使用Flexbox来查看其一些功能并获得最大浏览器支持语法的好地方是flexyboxes此外，如今的浏览器支持非常好：caniuse对于跨浏览器的兼容性display: flex和align-items，你可以使用以下命令：display:&nbsp;-webkit-box;&nbsp;display:&nbsp;-webkit-flex;&nbsp;display:&nbsp;-moz-box;&nbsp;display:&nbsp;-ms-flexbox;&nbsp;display:&nbsp;flex; &nbsp;-webkit-flex-align:&nbsp;center;&nbsp;-ms-flex-align:&nbsp;center;&nbsp;-webkit-align-items:&nbsp;center;&nbsp;align-items:&nbsp;center;