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

在 Web 开发中，经常需要将文本垂直居中，这在排版布局上非常重要。本文将介绍一些使用 CSS 垂直居中文本的方法。

方法一：使用 display: table

.parent{
  display: table;
}

.child{
  display: table-cell;
  vertical-align: middle;
}

• 将父元素的 display 属性设置为 table 呈现表格布局。
• 将子元素的 display 属性设置为 table-cell，使其表现为一个表格单元格。
• 使用 vertical-align 属性将子元素垂直居中。

方法二：使用 flexbox

.parent{
  display: flex;
  align-items: center;
}

• 将父元素的 display 属性设置为 flex，使用 flexbox 布局。
• 使用 align-items 属性将子元素垂直居中。

方法三：使用 line-height

.parent{
  line-height: 50px; /* 50px 为父元素的高度 */
}

• 将父元素的 line-height 属性设置为与其高度相等的值，使其内部文字居中。

方法四：使用 CSS Translate

.parent{
  position: relative;
}

.child{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

• 将父元素的 position 属性设置为 relative。
• 将子元素的 position 属性设置为 absolute 并使用 top 属性将其位置移到父元素的中心。
• 使用 transform 属性并结合 translateY 值将子元素垂直居中。

总结：以上四种方法都可以实现垂直居中文本，选用哪种方法需视具体情况而定。其中，方法一和方法二是比较常见的选择，方法三适用于只有单行文本的情况，而方法四相对而言比较灵活。