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

CSS 的一个常见任务是垂直居中文本或图像。

虽然 CSS2 不支持垂直对齐。但是我们可以通过组合一些属性来垂直居中块。诀窍是指定外部块要格式化为表格单元格，因为表格单元格的内容可以垂直居中。

下面的示例将段落居中放置在具有特定给定高度的块内。一个单独的示例显示了在浏览器窗口中垂直居中的段落，因为它位于绝对定位且与窗口一样高的块内。

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
DIV {
  GeeksforGeeks
}

更通用的方法

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

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

CSS 只是调整 div 的大小，通过将 div 的 line-height 设置为其高度来垂直居中对齐 span，并使 span 成为具有 vertical-align: middle 的内联块。然后它将行高设置为跨度的正常值，因此其内容将在块内自然流动。