如何用css实现多行文字垂直居中-css教程-PHP中文网

如何用css实现多行文字垂直居中

P粉602998670

发布： 2025-10-07 11:03:02

原创

493人浏览过

使用Flexbox、Grid、伪元素或table-cell可实现多行文字垂直居中，推荐现代布局首选Flexbox和Grid。

如何用css实现多行文字垂直居中

多行文字垂直居中在CSS中可以通过几种可靠的方法实现，关键是容器高度固定或自适应内容，同时保持文本自然居中。以下是几种常用且兼容性良好的方案。

使用 Flexbox（推荐）

Flex布局是最简单、最现代的方式，适用于大多数场景。

给父容器设置 display: flex，并使用 align-items: center 实现垂直居中。

示例代码：

这是一段
多行文字
垂直居中显示

立即学习“前端免费学习笔记（深入）”；

对应CSS：

.container {
  display: flex;
  align-items: center;      /* 垂直居中 */
  justify-content: center;  /* 水平居中（可选） */
  height: 200px;            /* 固定高度或由上下文决定 */
}

登录后复制

使用 Grid 布局

CSS Grid 同样支持简洁的居中方式，适合现代浏览器。

将容器设为 display: grid，然后使用 place-items: center。

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

查看详情

示例代码：

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

登录后复制

这种方法一行代码即可完成居中，语义清晰。

使用伪元素实现（兼容老浏览器）

在不支持 Flex 或 Grid 的旧环境中，可以用“伪元素 + vertical-align”技巧。

原理是利用内联元素的 vertical-align 特性，配合一个撑高全容器的伪元素。

实现方式：

.container {
  height: 200px;
  text-align: center;
  font-size: 0; /* 消除空白间隙 */
}
<p>.container::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
width: 0;
}</p><p>.text {
display: inline-block;
vertical-align: middle;
font-size: 16px;
text-align: left;
}</p>

登录后复制

HTML结构：

<div class="container">
  <div class="text">多行文字<br>居中显示</div>
</div>

登录后复制

使用 table-cell（传统方法）

将容器设为表格单元格行为，利用 vertical-align: middle 居中内容。

.container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 200px;
  width: 200px;
}

登录后复制

注意：该方法需要固定宽高，且父级最好有 display: table 包裹，灵活性较差。

基本上就这些。现代项目推荐使用 Flexbox 或 Grid，代码简洁，维护方便。老项目可考虑伪元素或 table-cell 方案。选择取决于浏览器支持和布局复杂度。

以上就是如何用css实现多行文字垂直居中的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

css边框颜色border-color设置技巧 CSS动画元素的初始状态如何设置_keyframes from与to技巧 CSS定位元素在不同浏览器中的表现一致吗_兼容性分析与优化 CSS框架Bulma的Flexbox布局如何使用_弹性盒子实践在css中link标签跨域样式引入问题