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

我有一个包含文本的 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>

做这个的最好方式是什么？

答案

您可以尝试这种基本方法：

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello World!
</div>

它只适用于单行文本，因为我们将行的高度设置为与包含框元素相同的高度。

一种更通用的方法

这是垂直对齐文本的另一种方法。此解决方案适用于单行和多行文本，但仍需要固定高度的容器：

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

CSS 只是调整<div>大小，垂直居中通过设置<div>的 line-height 等于其高度来对齐<span> ，并使<span>成为一个带有vertical-align: middle的内联块。然后它将<span>的行高设置回正常，因此其内容将在块内自然流动。

模拟表格显示

这是另一个选项，它可能不适用于不支持display: table旧浏览器display: table和display: table-cell （基本上只是 Internet Explorer 7）。使用 CSS 我们模拟表行为（因为表支持垂直对齐），HTML 与第二个示例相同：

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

使用绝对定位

该技术使用绝对定位的元素设置顶部，底部，左侧和右侧为 0. 在 Smashing Magazine， Absolute Horizontal And Vertical Centering In CSS中的文章中有更详细的描述。

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

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

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

Flexbox 演示 1

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}

<div class="box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>

或者，不是通过容器对齐内容， 当 flex 容器中只有一个 flex 项时 ，flexbox 也可以使flex 项的中心具有自动边距（如上面问题中给出的示例）。

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

Flexbox 演示 2

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
}
.box span {
  margin: auto;
}

<div class="box">
  <span>margin:auto on a flex item centers it both horizontally and vertically</span> 
</div>

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

`flex-direction: column`演示

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 18px;
  font-style: oblique;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertically aligns items */
  align-items: center;
  /* horizontally aligns items */
}
p {
  margin: 5px;
  }

<div class="box">
  <p>
    When flex-direction is column...
  </p>
  <p>
    "justify-content: center" - vertically aligns
  </p>
  <p>
    "align-items: center" - horizontally aligns
  </p>
</div>

从 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;

您可以通过添加以下 CSS 代码轻松完成此操作：

display: table-cell;
vertical-align: middle;

这意味着你的 CSS 最终看起来像：

#box {
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
  display: table-cell;
  vertical-align: middle;
}

<div id="box">
  Some text
</div>

答案