CSS 文本垂直居中实现方法详解

一、使用 line-height 实现垂直居中

使用 line-height 属性设置行高等于元素高度即可实现单行文本的垂直居中。

.container {
    height: 100px;
    line-height: 100px;
}

如果需要实现多行文本的垂直居中，可以使用伪元素和 transform。

.container {
    position: relative;
}
.container::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.text {
    display: inline-block;
    vertical-align: middle;
    transform: translateY(-50%);
}

二、使用 flexbox 实现垂直居中

使用 flexbox 可以轻松实现父容器内元素的垂直居中。

.container {
    display: flex;
    align-items: center; /* 垂直居中 */
}

如果需要水平和垂直居中，可以使用 justify-content 和 align-items。

.container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

三、使用 table-cell 实现垂直居中

将元素设置为 display: table-cell 和 vertical-align: middle 即可实现垂直居中。

.container {
    display: table-cell;
    vertical-align: middle;
    height: 100px; /* 需要设置高度 */
}

四、使用 grid 实现垂直居中

使用 grid 可以轻松实现父容器内元素的垂直居中。

.container {
    display: grid;
    place-items: center; /* 水平居中和垂直居中 */
}

五、使用 position 和 transform 实现垂直居中

将元素设置为 position: absolute 和 top: 50%，再使用 transform: translateY(-50%) 即可实现垂直居中。

.container {
    position: relative;
}
.text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

综上所述，CSS 实现文本的垂直居中有多种方法可选，根据不同需求选择不同的实现方法即可。