css文字垂直居中

/* 使用 Flexbox 实现文字垂直居中 */
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 100vh;           /* 设置容器高度为视口高度 */
}

/* 或者使用行内块元素和垂直对齐 */
.text {
  display: inline-block;
  vertical-align: middle;
  line-height: 100vh;      /* 设置行高为容器高度 */
}

/* 或者使用表格布局 */
.table-container {
  display: table;
  height: 100vh;
  width: 100%;
}
.table-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;      /* 如果需要水平居中 */
}

解释说明：

1. Flexbox 方法：通过 display: flex 和 align-items: center，可以轻松实现子元素在父容器中的垂直居中。justify-content: center 用于水平居中。
2. 行内块元素方法：通过设置 line-height 等于容器的高度，可以让单行文本垂直居中，但这种方法只适用于单行文本。
3. 表格布局方法：使用 display: table 和 display: table-cell 可以让内容像表格单元格一样垂直居中。

选择哪种方法取决于你的具体需求和浏览器兼容性要求。