如何垂直对齐 Div 中的文本

使用 div 时，有时需要确保其中的文本对齐垂直地在中间。这可以通过多种方法来实现。

使用line-height

如果div有固定的高度，比如50px，则可以简单地使用line-height CSS 属性。

#abc {
  height: 50px;
  line-height: 50px;
}

这将使文本在 div 内垂直居中。

使用显示属性

对于多行文本，您可以将其换行span 元素并应用显示属性和垂直对齐。

#abc {
  display: table;
  width: 100%;
}

#abc span {
  display: table-cell;
  vertical-align: middle;
}

使用变换属性

另一种方法涉及将变换属性与translateY()函数一起使用。这对于不支持显示属性的旧浏览器特别有用。

#abc {
  position: relative;
}

#abc p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}