ie9及更老浏览器需用display:table-cell+vertical-align:middle实现垂直居中，但必须配合display:table父容器，且父级需显式设置高度；table-cell不支持margin、float和height百分比（若祖先无显式高度），图片需设vertical-align避免基线留白。
IE9 及更老浏览器必须用 display: table-cell + vertical-align: middle，其他方案基本失效；但直接套用会踩坑，关键在父容器和子元素的配合。
为什么 display: table-cell 必须配 display: table 父容器
浏览器渲染时，table-cell 不是独立布局单元——它依赖表格格式化上下文（table formatting context）。如果父级只是 div 且没设 display: table，vertical-align: middle 就完全不生效，连 hint 都不会报错。
- 正确写法：
.parent { display: table; width: 100%; height: 200px; }，子级再设display: table-cell; vertical-align: middle; - 错误写法：父级用
block或inline-block，哪怕加了vertical-align也无效 - 注意：父级
height必须显式设置（百分比也行），否则子级无法按“父高”来居中
table-cell 下不能用 margin 和 float
table-cell 的盒模型天生排斥 margin，写上去等于没写；同时它和 float、position: absolute 互斥——CSS 规范明确禁止共存。一旦混用，整个单元格行为不可预测，常见表现为内容贴左/塌陷/换行失效。
- 替代
margin：用padding控制内边距，或在外层再包一层div做间距 - 替代
float：如需多列并排，整个结构改用display: table+ 多个table-cell子项，靠text-align或width控制对齐 - 绝对定位元素必须放在
table-cell内部的子元素上，而非table-cell自身
高度百分比在 table-cell 中为何经常失效
当父级 display: table 的高度是百分比（比如 height: 100%），而它的祖先链中某个父容器没设显式高度（包括 html、body），那么 100% 会计算为 0，导致 table-cell 高度坍缩，vertical-align 失效。
- 必须确保从根到父级的路径上，所有容器都设了可计算的高度，例如：
html, body { height: 100%; } - 更稳妥的做法：用视口单位，如
height: 100vh，绕过祖先高度依赖 - 若内容动态变化，
table-cell会自动撑高，此时不要强行限制子元素height，否则可能截断
如何让 table-cell 居中文字和图片都不出问题
单行文本直接 text-align: center + vertical-align: middle 即可；但图片默认是 inline 元素，会受基线对齐影响，常出现底部留白。这不是 bug，是 vertical-align 默认作用于基线（baseline）的结果。
- 图片加
vertical-align: middle或vertical-align: top，别依赖默认值 - 避免给图片设
display: block后又忘掉清除父级line-height，否则空行仍占位 - 如果图文混排，建议把图片和文字都包进一个
inline-block容器里，统一用vertical-align: middle - 慎用
white-space: nowrap——它会让table-cell拒绝换行，内容溢出也不折行，视觉上像“撑爆”
真正难的不是写对那两行 CSS，而是意识到 table-cell 是一套封闭的渲染逻辑：它不接受外部干扰，也不主动向外暴露尺寸。兼容性代价换来的是确定性——只要父容器高度可控，居中就稳如磐石。这点在后台系统弹窗、空状态占位图等场景里，比 flex 的“看起来简洁”更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
