HTML中如何实现子元素的多行文字垂直居中

在HTML页面布局中，子元素多行文字垂直居中是常见的需求，和单行文字居中不同，多行文字因为高度不确定，不能直接使用line-height属性实现，需要结合不同的CSS属性来达成效果。

方案一：使用CSS Flex弹性布局

Flex布局是目前最推荐的实现方式，兼容性好且代码简洁，只需要给父容器设置对应的flex属性即可。

/* 父容器样式 */
.parent {
    display: flex;
    /* 垂直方向居中 */
    align-items: center;
    /* 水平方向居中，可选 */
    justify-content: center;
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
}
/* 子元素样式，多行文字自动换行 */
.child {
    width: 80%;
    text-align: center;
}

对应的HTML结构如下：

<div class="parent">
    <div class="child">
        这是一段多行文字内容，当文字长度超过容器宽度时会自动换行，需要实现垂直方向居中显示的效果。
    </div>
</div>

方案二：使用CSS Grid网格布局

Grid布局和Flex布局思路类似，同样只需要给父容器设置简单属性就能实现垂直居中。

.parent {
    display: grid;
    /* 垂直方向居中 */
    align-items: center;
    /* 水平方向居中，可选 */
    justify-items: center;
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
}
.child {
    width: 80%;
    text-align: center;
}

方案三：使用表格属性实现

利用表格单元格天然支持垂直居中的特性，将父容器模拟为表格单元格即可实现效果，兼容性非常好，支持老版本浏览器。

.parent {
    display: table-cell;
    vertical-align: middle;
    /* 水平方向居中，可选 */
    text-align: center;
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
}
.child {
    display: inline-block;
    width: 80%;
    text-align: left;
}

方案四：vertical_align配合伪元素

这种方法不需要修改父容器的display属性，通过伪元素设置高度为100%，再配合vertical-align实现居中，适合不能改变父容器布局的场景。

.parent {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    text-align: center;
}
/* 伪元素设置高度为100% */
.parent::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.child {
    display: inline-block;
    width: 80%;
    vertical-align: middle;
    text-align: left;
}

不同方案的选择建议

• 如果项目不需要兼容IE9及以下浏览器，优先选择Flex布局，代码最简洁，扩展性最好。
• 如果需要兼容老版本浏览器，可以选择表格属性方案或者伪元素方案。
• 如果页面本身已经使用了Grid布局，直接复用Grid的align-items属性即可，不需要额外引入其他布局方式。

需要注意的是，以上所有方案中的父容器都需要有明确的高度设置，否则垂直居中效果无法生效，因为垂直居中需要基于明确的容器高度来计算位置。

HTML多行文字垂直居中CSS_flexCSS_gridvertical_align修改时间：2026-07-03 01:18:18