display: table-cell 能垂直居中因其依赖表格单元格的 vertical-align: middle 特性，但需三层结构、显式高度且破坏盒模型，现代项目因语义化差、灵活性低而少用。
为什么 display: table-cell 能垂直居中但现代项目很少用
它确实能绕过旧浏览器（IE8+、Firefox 2+）对 flex 或 grid 的不支持，靠表格单元格天然的 vertical-align: middle 实现居中。但本质是“借壳”：把容器伪装成 table，子元素伪装成 table-cell，不是真正语义化布局，且会破坏原有盒模型行为。
常见错误现象：margin 失效、float 被忽略、无法与 position: absolute 子元素良好配合；更隐蔽的是，父容器必须设 height（百分比高度也需祖先有明确高度），否则 vertical-align 不触发。
- 只适用于单行内容或固定高度容器内的居中需求
- 若子元素是块级且含内边距/边框，需额外用
box-sizing: border-box避免高度溢出 - IE8 不支持
display: table-cell在inline元素上生效，务必确保父容器是block级
display: table-cell 布局的最小可行代码结构
关键不在“怎么写”，而在“谁套谁”——必须三层结构：外层 table → 中层 table-row → 内层 table-cell。省略任一层，vertical-align 都不会起作用。
/* 容器必须设 height，否则 vertical-align 无效 */
.container {
display: table;
width: 100%;
height: 200px; /* 必须有明确高度 */
}
<p>.row {
display: table-row;
}</p><p>.cell {
display: table-cell;
vertical-align: middle;
text-align: center; /<em> 水平居中需单独加 </em>/
}</p><p>/<em> 子元素可为任意块级或行内元素 </em>/
.cell > <em> {
margin: 0; /</em> 防止默认 p/h 标签上下边距干扰 */
}</p>
注意：.row 层看似多余，但 IE8/9 中若直接让 .container 同时承担 table 和 table-cell 功能（即 display: table-cell + vertical-align），会失效。必须严格分层。
与 inline-block + 伪元素方案对比时的兼容性陷阱
有人尝试用 inline-block 模拟 table-cell，再配 ::before 伪元素撑高，看似简洁，但在 IE8 下伪元素不支持 content: "" 以外的值，且 vertical-align 对伪元素的基线计算极不稳定。
-
table-cell方案在 IE8–10 中表现一致，而inline-block方案在 IE8 下常出现 1–2px 偏移 - 若容器宽度由内容撑开（
width: auto），table-cell会自动收缩适配，但inline-block需额外设font-size: 0清除空白符间隙，这又可能影响子元素内文字渲染 - 移动端 Safari 5.1–6.1 对
table-cell的vertical-align支持有微小偏差，建议加line-height: normal重置
实际项目中该不该用？关键看这三点
不是“能不能”，而是“值不值得”。现在所谓“兼容旧版浏览器”，往往指维护遗留系统，而非新项目主动降级。
- 如果目标环境明确包含 IE8/9，且无法用 JS 注入 polyfill（如
flexibility.js），table-cell是最稳妥的纯 CSS 方案 - 若只需兼容 IE10+，优先用
display: flex+align-items: center，并加-ms-前缀（IE10 需-ms-flex-align: center） - 最易被忽略的一点：当容器本身是
position: absolute或fixed时，table-cell的高度继承逻辑会异常——此时必须显式写死height，不能依赖top/bottom计算值
旧方案的生命力不在技术先进性，而在它把一个复杂问题压缩成几行确定性 CSS。但每多一层嵌套，就多一分维护成本——尤其是当设计师突然要求“这个居中区域响应式缩放”时，table-cell 的高度刚性会立刻暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
