掌握HTML多行文本垂直居中代码-html教程-PHP中文网

对容器设 display: flex + align-items: center + justify-content: center，就能可靠居中多行文本，兼容现代浏览器（Chrome 29+、Firefox 20+、Safari 6.1+、Edge 12+），无需计算行高或依赖行数，但容器必须有明确高度（如 height 或 min-height），且避免与 line-height 冲突。

掌握html多行文本垂直居中代码

用 `display: flex` 居中多行文本最稳

直接给结论：对容器设 display: flex + align-items: center + justify-content: center，就能可靠居中多行文本，兼容现代浏览器（Chrome 29+、Firefox 20+、Safari 6.1+、Edge 12+）。不用计算行高，不依赖文字行数，也不怕换行符或干扰。

常见错误是只加 align-items: center 却忘了设 height 或 min-height——容器没高度，就“看不见”居中效果。另外，如果父容器用了 float 或 position: absolute，flex 可能失效，得检查层叠上下文。

容器必须有明确高度（比如 height: 200px 或 min-height: 100vh）
子元素如果是或 ，无需额外样式；如果是内联元素（如），建议加 display: block 避免意外换行错位
避免在 flex 容器上同时设 line-height，它会和 align-items 冲突，导致视觉偏移


表格单元格里多行文字怎么垂直居中

表格自带的 vertical-align: middle 只对单元格内容整体生效，但前提是内容不能是块级元素嵌套。如果  里直接放多行文本（含换行符或多个 
），vertical-align 仍有效；但若套了 …，就得靠 flex 或重置 display。

第一行
第二行 → 有效


第一行

											
												
												
													财经HTML高端海报生成
													复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP
												
												下载
												
											
										
第二行
 → 失效，需给  加 display: flex; align-items: center;
不要给  设 height 同时又设 padding 过大，否则实际可用空间不足，文字会被截断

line-height 能不能用来居中单行？多行呢？
line-height 对单行文本有效——设成和容器高度相等即可居中；但多行时它会让每行都按该值撑开，结果是行间距爆炸，根本不是“整体居中”。比如容器高 100px，文字两行，line-height: 100px 会让两行分别距顶部和底部各 50px，中间空一大截。

仅适用于纯单行、无换行、字体大小固定的场景
响应式页面里字体随屏幕缩放，line-height 值很难匹配动态高度
如果用 rem 或 em 设 line-height，还得同步调整容器高度，维护成本高

IE11 兼容时的替代方案
IE11 支持 flex，但有个坑：align-items: center 在 flex-direction 为 column 时表现异常；更稳妥的是用绝对定位 + transform，或者表格布局。不过要注意，transform: translateY(-50%) 必须配合 top: 50%，且父容器得是 position: relative。

写法：position: absolute; top: 50%; transform: translateY(-50%);，子元素需设 position: relative（防止文字被裁）
表格方案：display: table-cell; vertical-align: middle;，但需给容器加 display: table; 和固定宽高
别用 margin-top 算负值——行数一变就得重算，CSS 无法自动适应

真正麻烦的不是写法，而是当文本内容动态加载、高度不确定，又得兼容老浏览器时，flex 的 min-height 和 JS 测高 fallback 往往得一起上。这时候别硬扛，先确认是否真需要支持 IE11。