vertical-align 必须作用于 td 或 th 元素本身，或显式设为 display: table-cell 的容器；写在 table 或 tr 上无效，且需配合 text-align 实现完整居中。
vertical-align 是唯一能直接控制表格单元格内容垂直对齐的 CSS 属性，但它只对 td 和 th 生效，写在 table 或 tr 上完全无效。
vertical-align 写在哪才起作用？
必须作用于 td 或 th 元素本身，或显式设为 display: table-cell 的容器。常见错误包括：
- 把
vertical-align: middle写在table或tr标签上——浏览器忽略，无任何效果 - 给
td里的子div设置vertical-align，但没改它的display，结果不生效 - 用
valign="middle"这类 HTML 属性——HTML5 已废弃，验证失败，且无法被 JS 动态读取或修改
为什么 vertical-align: middle 看不出效果？
不是属性失效，而是缺乏高度参考空间。它只在单元格当前高度范围内对齐内容，如果单元格由单行文本自动撑开（比如默认行高 16px），middle 和 baseline 视觉几乎一样。
- 加
padding：如padding: 12px 8px，上下留白扩大对齐空间 - 设
min-height或height：如min-height: 40px，尤其适合固定行高的数据列表 - 避免仅靠
line-height撑高：多行文本会突破该值，vertical-align仍有效，但line-height失去控制力
复杂内容（图片、按钮、多行文本）怎么稳居中？
当 td 里嵌套了块级元素（如 div、button、img），vertical-align 对其内部子元素不再起作用，此时需升级容器能力：
立即学习“前端免费学习笔记（深入）”；
- 用
display: flex：td.flex-center { display: flex; align-items: center; justify-content: center; }，对任意子结构都可靠 - 用
display: grid：td.grid-center { display: grid; place-items: center; }，代码更短，但 IE 不支持 - 兼容老系统（如 IE11）时，优先用
vertical-align: middle+ 足够padding，而非强行 flex
text-align 和 vertical-align 必须配对用
水平居中靠 text-align，垂直居中靠 vertical-align，两者缺一不可。单独设一个，只会动一半：
-
td { text-align: center; vertical-align: middle; }才是完整居中 - 若某列要右对齐金额，可单独加类：
td.amount { text-align: right; vertical-align: middle; } -
text-align对table标签本身无效，它不渲染内容，只影响含文本的单元格
真正容易被忽略的是：一旦给 td 加了 display: flex 或 display: grid，它就不再是原生表格单元格，自动等宽、换行策略、响应式行为都会变化——这不是 bug，是布局模型切换的必然结果。
