css 文字怎么样垂直居中显示

在 CSS 中，文字的垂直居中显示是一个很基础但又常用的问题。下面介绍几种常见的实现方法。

/* 方法一：使用line-height属性 */
.container {
  height: 200px;
  line-height: 200px; /* 行高等于容器高度 */
  text-align: center; /* 文字水平居中 */
}

/* 方法二：使用position属性 */
.container {
  position: relative;
}

.container p {
  position: absolute;
  top: 50%; /* 往上偏移50% */
  transform: translateY(-50%); /* 再往下偏移50% */
}

/* 方法三：使用flex布局 */
.container {
  display: flex;
  justify-content: center; /* 主轴居中 */
  align-items: center; /* 交叉轴居中 */
}

以上三种方法都可以实现文字的垂直居中显示，具体选择哪种方法要根据实际情况而定，比如在哪种布局下使用，需要考虑兼容性等因素。