css字体垂直居中

/* 使用行高（line-height）实现单行文本垂直居中 */
.container {
  height: 100px; /* 容器高度 */
  line-height: 100px; /* 行高等于容器高度 */
  text-align: center; /* 水平居中 */
}

/* 使用 Flexbox 实现多行文本或块级元素垂直居中 */
.flex-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100px; /* 容器高度 */
}

/* 使用表格布局实现垂直居中 */
.table-container {
  display: table;
  height: 100px; /* 容器高度 */
  width: 100%; /* 宽度可以根据需要调整 */
}

.table-cell {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
  text-align: center; /* 水平居中 */
}

解释说明：

1. 使用行高（line-height）：适用于单行文本。通过将 line-height 设置为与容器高度相同，可以使文本在容器内垂直居中。
2. 使用 Flexbox：适用于多行文本或块级元素。通过设置 display: flex 和 align-items: center，可以轻松实现垂直居中。
3. 使用表格布局：通过将容器设置为 display: table，并将子元素设置为 display: table-cell，然后使用 vertical-align: middle 来实现垂直居中。