display:table-cell能垂直居中，因其模拟表格单元格并原生支持vertical-align:middle；需父容器设display:table和固定高度、子元素设display:table-cell及vertical-align:middle，缺一不可，兼容IE8+。
为什么 display: table-cell 能垂直居中？
因为 table-cell 模拟了表格单元格的行为，天然支持 vertical-align 属性——它不是靠 flex 或 transform“骗”出来的居中，而是浏览器原生对齐逻辑。只要父容器设为 display: table，子元素设为 display: table-cell，再配 vertical-align: middle，就能稳定生效，且兼容 IE8+。
table-cell 垂直居中的最小必要结构
必须同时满足三个条件，缺一不可：
- 最外层容器（如
<div class="wrapper">）设display: table，高度需明确（比如height: 200px或min-height） - 中间包裹层（通常一个空的
<div>）设display: table-cell和vertical-align: middle - 真正要居中的内容（文字、图片、按钮等）放在该
table-cell内，无需额外定位
示例：
<div class="wrapper">
<div class="cell">
<p>我要垂直居中</p>
</div>
</div>CSS：
立即学习“前端免费学习笔记（深入）”；
.wrapper {
display: table;
width: 100%;
height: 200px; /* 必须有高度 */
}
.cell {
display: table-cell;
vertical-align: middle;
text-align: center; /* 水平居中可选 */
}常见踩坑：为什么内容没居中？
绝大多数失败都源于这几点：
-
table-cell的父容器没设display: table，或忘了设高度（height/min-height） - 误把
vertical-align加在内容元素上（如p { vertical-align: middle }），它只对table-cell、inline等元素有效 - 用了
float或position: absolute破坏了 table 布局流，导致table-cell失效 - 父容器宽度为 0 或被其他样式撑开异常，间接导致高度塌陷
和 flex 布局比，table-cell 适合什么场景？
不是过时方案，而是有明确优势的补充选择：
- 需要兼容 IE8–IE11 且不想用 JS fallback 时，
table-cell是少数可靠方案 - 内容高度动态变化（比如多行文本），flex 的
align-items: center在某些老版本安卓 WebView 中有偏移 bug，而table-cell更稳 - 嵌套层级深、已有大量
display: inline-block或浮动布局，强行切 flex 易引发连锁重排，用table-cell可局部替换、风险低
但注意：table-cell 不支持 margin（会失效），间距得靠 padding 或内层元素控制；也不能直接设置 flex 相关属性。
