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

在 Web 开发中，垂直居中文本是一个常见的需求。本篇文章将介绍几种实现垂直居中文本的 CSS 技巧。

1. 使用 line-height 属性

简单粗暴的方法是给需要居中的元素设置一个与父容器一样高的 line-height 属性值。例如：

<div class="parent">
  <div class="child">Hello, world!</div>
</div>

.parent {
  height: 100px;
  border: 1px solid black;
}

.child {
  line-height: 100px;
}

这种方法在纯文本的情况下表现不错，但如果文本中包含图片等图形内容，就可能错位了。

2. 使用 display 和 margin 属性

给需要居中的元素设置 display: table 属性，然后再给其外层元素设置 display: table-cell 和 vertical-align: middle 属性，就可以实现垂直居中文本了。例如：

<div class="parent">
  <div class="child">Hello, world!</div>
</div>

.parent {
  display: table;
  height: 100px;
  border: 1px solid black;
}

.child {
  display: table-cell;
  vertical-align: middle;
  margin: 0;
}

这种方法在处理图片等图形内容时表现较好。但如果外层元素设置了 display: inline-block 或 float 属性，则无法实现居中。

3. 使用 Flexbox 布局

使用 Flexbox 布局是实现垂直居中文本的最佳方法。其实现方式非常简单：

<div class="parent">
  <div class="child">Hello, world!</div>
</div>

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  border: 1px solid black;
}

.child {
  margin: 0;
}

其中，display: flex 属性将父容器设为弹性容器，align-items: center 和 justify-content: center 属性分别指定垂直和水平方向的居中方式。

总结

以上三种方法均能实现垂直居中文本，但其适用场景略有不同。line-height 属性适用于处理纯文本的情况，display 和 margin 属性适用于处理图形文本的情况，而 Flexbox 布局则是最佳解决方案。