使用 CSS 将文本在 Div 中垂直居中

用于垂直居中的高级 CSS 技术

在第三个脚本中，我们使用表格显示方法。环境 在容器上和 在使用创建的伪元素上 允许我们使用 vertical-align: middle; 财产。此方法模仿表格单元格的行为，使得内容垂直居中成为可能。虽然这种方法在现代网页设计中不太常用，但它对于保持与旧浏览器的兼容性或处理遗留代码时非常有用。它提供了一种可靠的方式来居中内容，而无需依赖较新的布局系统。

第四个脚本示例使用 财产。通过设置 等于容器的高度，文本垂直居中。这种技术对于单行文本来说简单且有效。但是，它可能不适合容器高度可能发生变化的多行文本或动态内容。尽管有其局限性， 方法是在简单场景中垂直居中文本的快速简便的解决方案。

使用 Flexbox 进行垂直居中

CSS 弹性盒

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

使用网格垂直居中

CSS 网格

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: grid;
  place-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

使用表格显示垂直居中

CSS表格显示

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: table;
}
#box::before {
  content: "";
  display: table-cell;
  vertical-align: middle;
}
#box > div {
  display: inline-block;
  vertical-align: middle;
}
<div id="box"><div>Lorem ipsum dolor sit</div></div>

使用行高进行垂直居中

CSS 行高

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  line-height: 170px;
  text-align: center;
}
<div id="box">Lorem ipsum dolor sit</div>