vertical-align 在 table-cell 中常失效，因其仅基于行框基线对齐且不感知父容器高度；对块级子元素、ie8兼容性、混排字体等场景表现不稳定，现代推荐 flex 替代。
vertical-align 在 table-cell 中为什么经常失效
因为 vertical-align 只对「行内元素」和「表格单元格（display: table-cell）」生效，但它不是“让内容在容器里垂直居中”的万能开关——它对父容器高度无感知，只作用于当前行框（line box）的基线对齐逻辑。
常见错误现象：vertical-align: middle 写了但文字还是贴顶、或和相邻单元格错位；用在 div 上完全没反应（因为默认是 display: block）。
- 必须确保父元素是
table或设置了display: table，子元素是table-cell（或直接用td/th） -
vertical-align对flex/grid容器无效，别混用 - 如果单元格里有块级元素（如
div），它会按整行高度参与对齐，而非按内部内容；此时需额外控制该块级元素的line-height或设为inline-block
line-height 居中只适用于单行文本，且高度必须精确匹配
靠 line-height 等于容器高度来“撑开”单行文本实现视觉居中，是最轻量的做法，但也是最脆弱的方案。
使用场景：纯文字、固定高度、确定只有一行（比如按钮文字、表头、状态标签）。
- 容器必须是
display: inline-block或inline，且不能换行（white-space: nowrap更保险） -
line-height值必须等于容器的height，差 1px 都可能偏移 - 字体渲染差异（尤其 Windows 的 ClearType、macOS 的抗锯齿）会导致实际基线位置浮动，实测偏差常达 0.5–1px
- 遇到中文+英文混排、或用了自定义字体，
line-height的“居中感”会进一步失准
IE8–IE11 下 vertical-align: middle 表现不一致
老版本 IE 对 table-cell 的 vertical-align 实现有偏差：它把单元格内容当成一个整体去对齐，而不是按行框计算，导致多行文本、带 padding 或 border 的情况容易偏高或偏低。
兼容性影响：IE9 开始支持标准行为，但 IE8 及更早版本中，vertical-align: middle 在非空单元格里常表现为“接近 middle”，而非真正居中。
- 若需兼容 IE8，优先用
line-height+ 单行限制，或 JS 测量后动态调整padding-top - 避免在 IE8 中对
table-cell同时设置padding和vertical-align，padding 会被计入对齐参考范围，加剧偏差 - 测试时务必用真实 IE 环境（不是 Edge 的 IE 模式），后者模拟不全
现代项目中更推荐 flex 替代 table-cell 居中
虽然问题限定在 table 场景，但现实中很多所谓“表格布局”其实只是视觉像表格，底层用 div + display: table 是为了兼容老浏览器，反而增加了对齐复杂度。
如果目标环境支持 Flexbox（IE10+），直接用 display: flex + align-items: center 更可靠、更易维护。
-
flex不依赖行框模型，对多行、换行、图标+文字组合都天然友好 - 无需担心
line-height与字体度量的纠缠，也不用处理 IE8 的table-cellbug - 注意：Flex 容器设
height后，子项若未设flex-shrink: 0，在空间不足时可能被压缩，影响居中效果
真正麻烦的从来不是写哪一行 CSS，而是判断这个单元格里会不会突然多出一行字、会不会换字体、会不会被塞进一个不归你管的 legacy wrapper 里。这些边界情况，vertical-align 和 line-height 都不会主动提醒你。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
