绝对定位 + transform 是最常用且兼容性稳妥的多行文字垂直居中方案，通过 left: 50%、top: 50% 定位中心点，再用 transform: translate(-50%, -50%) 反向偏移自身尺寸实现精准居中。
绝对定位 + transform 实现多行文字垂直居中
纯 CSS 多行文字垂直居中，position: absolute 配合 transform: translate(-50%, -50%) 是最常用且兼容性稳妥的做法。它不依赖父容器高度是否已知，也不要求内容为单行，关键在于把元素“先拉到中心点再反向偏移自身尺寸”。
常见错误是只写 top: 50% 却忘了 transform: translateY(-50%)，结果文字顶部对齐了父容器中线，整体往下掉了一半自身高度。
- 父容器必须设
position: relative（或其它非static值），否则子元素的absolute会相对于 viewport 定位 - 子元素需显式设置
left: 50%和top: 50%，再用transform: translate(-50%, -50%)回拉 - 如果文字内容动态变化、高度不可预知，这个方法依然有效；但若父容器高度为
0（比如没设高、子元素又塌陷），那就没东西可居中
.container {
position: relative;
height: 200px; /* 必须有高度，或由内容撑开 */
}
.centered-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
为什么不用 table-cell + vertical-align？
用 display: table-cell 配合 vertical-align: middle 看似简洁，但它在现代布局中问题明显：父容器必须是 table 或 table-cell，而 table 语义错乱、响应式困难，且无法与 Flex/Grid 混用。更关键的是，table-cell 会强制子元素按表格单元格渲染，导致 margin 失效、flex 属性被忽略、甚至影响伪元素行为。
- 不支持
flex子项嵌套 —— 一旦父级设了display: table-cell，里面再写display: flex会被降级处理 -
vertical-align对块级元素无效，只对 inline/inline-block/表单元格起作用；多行p标签默认是块级，得额外设display: inline-block才能生效 - IE8+ 虽支持，但 Safari 旧版本对
table-cell的盒模型计算有偏差，容易出现 1–2px 偏移
Flexbox 替代方案的边界条件
如果父容器能用 Flex 布局，display: flex + align-items: center + justify-content: center 更直观。但它不是万能的：当父容器高度由内容撑开（比如 height: auto）、且内部只有文字没有其他块级兄弟时，它依然能居中；但一旦父容器高度为 0（例如未设高、子元素又 float 或 absolute 脱离文档流），Flex 就无从发力。
- 父容器必须有明确高度来源（固定值、min-height、或被其他内容撑开），否则
align-items: center没参考基准 - 文字容器本身不能设
position: absolute，否则脱离 Flex 主轴，align-items对它无效 - 如果需要兼容 IE10–IE11，注意
flex的老语法（display: -ms-flexbox）和属性前缀（-ms-flex-align）仍需保留
“模拟表格”的陷阱在哪
所谓“通过绝对定位模拟表格”，本质是手动复现 table-cell 的居中逻辑，但放弃语义和浏览器原生表格行为。很多人误以为只要加了 position: absolute 和 top/left: 50% 就算“模拟成功”，却忽略了表格居中还隐含对齐基线、内边距继承、换行策略等细节。
- 绝对定位元素默认
white-space: normal，换行正常；但若父容器设了white-space: nowrap，文字就会溢出，而表格单元格会自动折行 - 表格单元格的
padding会影响内容区域，而绝对定位元素的padding不改变transform的计算基准（它始终基于 border box） - 如果文字里有
line-height明确设定，transform居中仍然准确；但若依赖浏览器默认line-height（如 1.2），不同字体下实际行高浮动，视觉上可能微偏
真正难的不是写出那三行 CSS，而是判断当前上下文里——父容器高度是否可控、是否已有 Flex/Grid 布局、要不要支持老浏览器、以及文字是否会因响应式断行而改变高度。这些条件一变，最优解就可能从 transform 切到 grid，或退回到 JS 测量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
