display:table-cell能垂直居中是因为它将元素模拟为表格单元格，从而激活vertical-align:middle能力；必须父容器设display:table、子容器设display:table-cell和vertical-align:middle三者缺一不可。
为什么用 display: table-cell 能居中？
它把普通元素模拟成表格单元格，从而激活 vertical-align 的垂直对齐能力——而这个属性在 block 或 inline-block 元素上是无效的。关键在于：vertical-align: middle 在 table-cell 上才真正起作用，且不依赖固定高度，适合内容动态变化的场景。
display: table-cell 居中的最小必要写法
必须同时满足三个条件，缺一不可：
- 父容器设
display: table（或display: table-row） - 子容器设
display: table-cell - 子容器设
vertical-align: middle
示例：
<div style="display: table; width: 300px; height: 200px;">
<div style="display: table-cell; vertical-align: middle; text-align: center;">
这段文字会水平+垂直居中
</div>
</div>
注意：text-align: center 是给子容器加的，不是父容器；height 必须设在父容器上，否则没有参考高度，vertical-align 无意义。
立即学习“前端免费学习笔记（深入）”；
常见踩坑点：为什么写了没效果？
最常被忽略的几个硬性限制：
-
display: table-cell元素不能设margin—— 它不支持外边距，想留空用padding - 父容器若没设
width或height，子元素会坍缩，vertical-align失效 - 如果父容器用了
float或position: absolute，可能导致display: table行为异常（尤其在旧版 IE 中） - 嵌套多层时，中间某一层意外设了
display: block，会打断 table 渲染流
和 Flex 对比：什么时候该选 table-cell？
它不是过时方案，仍有不可替代的适用场景：
- 需要兼容 IE8–IE11（Flexbox 在 IE10+ 才有部分支持，且需前缀）
- 父容器高度由内容撑开，但又要求内部元素始终垂直居中（Flex 需要父容器有明确
height或min-height） - 已有大量旧代码，改用 Flex 会破坏语义或引发连锁样式问题，
table-cell是最小侵入式修复
但别为了“兼容”硬套——现代项目优先用 Flex；table-cell 真正的价值，在于它对「高度自适应 + 垂直居中」这一组合的天然支持，这点至今没被完全替代。
