当我们在 HTML 中创建网站模板或者一些设计时，有时我们需要将一些元素垂直对齐在框内。
这可能是在 div 内对齐文本中间，或者某些图像需要在中心垂直对齐。

有很多方法可以使用一些 CSS 样式垂直对齐 HTML 元素。
在这里，我们将提供一个流行的 CSS 方法列表，用于在 div 中垂直居中文本。

1) 使用 flexbox 垂直对齐文本

在 div 中垂直对齐文本的最佳方法是使用 CSS flex 属性。
我们需要为子元素使用 flexbox 和 align-items: center。

HTML代码

<div>
    文本垂直居中对齐
</div>

CSS 代码：

div {
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
  border: 2px solid grey;
  min-height: 200px;
  padding: 20px;
}

2) 使用 table-cell和 vertical-align垂直对齐 div 文本：

我们可以通过在外部标签上设置 display: table;和在内部标签上设置 display: table-cell来垂直对齐文本。

HTML代码

<div>
<span>
    <div>
  <span>
    文本垂直居中对齐
  </span>
</div>
</span>
</div>

CSS 代码：

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px solid grey;
}
span {
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
}

3）使用line-height和vertical-align垂直居中单行文本

当我们有单行文本要垂直对齐时，此方法很有用。
我们需要在 CSS 中设置相同的 line-height、height和 vertical-align。

HTML代码

<div>
<span>
    文本垂直居中对齐
</span>
</div>

CSS 代码：

div {
    height: 120px;
    line-height: 120px;
    text-align: center;
    border: 2px solid grey;
}
span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}