使用Flexbox、Grid、伪元素或table-cell可实现多行文字垂直居中，推荐现代布局首选Flexbox和Grid。
多行文字垂直居中在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。
稿定抠图
AI自动消除图片背景
76 查看详情 
示例代码：
.container { display: grid; place-items: center; /* 水平和垂直居中 */ height: 200px;}
这种方法一行代码即可完成居中，语义清晰。
使用伪元素实现（兼容老浏览器）
在不支持 Flex 或 Grid 的旧环境中，可以用“伪元素 + vertical-align”技巧。
原理是利用内联元素的 vertical-align 特性，配合一个撑高全容器的伪元素。
实现方式：
.container { height: 200px; text-align: center; font-size: 0; /* 消除空白间隙 */}.container::before {content: '';display: inline-block;height: 100%;vertical-align: middle;width: 0;}
.text {display: inline-block;vertical-align: middle;font-size: 16px;text-align: left;}
HTML结构：
多行文字
居中显示
使用 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实现多行文字垂直居中的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1026978.html
微信扫一扫 
支付宝扫一扫 
