如何使用 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>

实现这一目标的最佳方式是什么？

原文由 Irakli Lekishvili 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

 <div>
  Hello World!
</div>

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

---

一种更通用的方法

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

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

 <div>
  <span>Hello World!</span>
</div>

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

---

模拟表显示

这是另一个选项，它可能不适 用于不支持 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>Hello World!</span>
</div>

---

使用绝对定位

此技术使用绝对定位元素，将顶部、底部、左侧和右侧设置为 0。在 Smashing Magazine 中的一篇文章“ _CSS 中的绝对水平和垂直居中_”中对其进行了更详细的描述。

 div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  width: 100%;
  border: 2px dashed #f69c55;
}

 <div>
  <span>Hello World!</span>
</div>

原文由 Michiel van Oosterhout 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

弹性盒演示 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-item 时_，flexbox 也可以使用 auto margin 居中 flex 项目 而不是通过 container 对齐内容（如上面问题中给出的示例）。

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

弹性盒演示 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-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>

flexyboxes 是开始使用 Flexbox 以了解它的一些特性并获得最大浏览器支持的语法的好地方

此外，现在的浏览器支持非常好： 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;

原文由 Danield 发布，翻译遵循 CC BY-SA 4.0 许可协议