vertical-align: middle 仅对 td/th 有效，因只作用于 display: table-cell 元素；valign="middle" 已被 html5 废弃；需配合 padding/min-height/line-height 等提供高度上下文，复杂内容应改用 display: flex + align-items: center。
vertical-align: middle 必须写在 td 或 th 上才有效
给 tr、table 甚至 body 设 vertical-align: middle 都没用——浏览器只认 td 和 th 是表格单元格，只有它们默认是 display: table-cell，而 vertical-align 只对这类元素生效。
常见错误现象：
-
<tr style="vertical-align: middle"><td>内容</td></tr>→ 样式被忽略 - 全局写了
table { vertical-align: middle; }→ 完全不生效 - 用了 Bootstrap 等框架后发现
th不居中 → 框架 CSS 重置了vertical-align，需检查 computed styles
valign="middle" 已被 HTML5 废弃，现代项目必须禁用
valign 是 HTML4 的遗留属性，W3C 在 HTML5 中明确标记为 obsolete。Chrome/Firefox/Edge 90+ 已基本不解析它，尤其当页面启用了 strict doctype 或存在任何 vertical-align CSS 规则时，valign 会被直接丢弃。
为什么你偶尔看到它“好像生效”？那是浏览器在降级兼容，不可靠。真实风险包括：
- React/Vue 渲染时自动过滤内联
valign属性 - WebView（尤其 Android 低版本）直接忽略该属性
- 构建工具（Vite/Webpack）可能报 warning，CI 流程失败
- 和 Flex/Grid 布局共存时，
valign彻底失效
vertical-align: middle 看起来没反应？大概率是高度上下文缺失
vertical-align: middle 不是对齐“单元格高度的数学中点”，而是对齐所在行框（line box）的中心。如果 td 高度由单行文字撑开（比如仅 24px），那“中间”空间几乎为零，视觉上就等于没动。
必须提供可感知的高度参考，手段有三：
- 加
padding：例如padding: 12px 8px，上下留白让内容自然居中 - 设
min-height：如min-height: 48px，确保有足够空间供对齐计算 - 配
height+line-height（仅限单行纯文本）：如height: 60px; line-height: 60px;，但多行时会出错
注意：若 td 里嵌了 <p></p>、<div> 等块级元素，<code>vertical-align 对它们无效——它不控制子元素布局，只影响单元格自身在行内的位置。
复杂内容（图文混排、多段文字）必须用 display: flex 兜底
当单元格里有图标 + 文字 + Badge 或按钮时，vertical-align: middle 就会失准。因为它的对齐逻辑基于行框基线，不是容器级居中。
可靠做法是把 td 自身变成 Flex 容器：
- 加
display: flex; align-items: center;—— 垂直居中所有子元素 - 加
justify-content: center;—— 如需水平居中 - 必须配
min-height（如min-height: 60px），否则 Flex 主轴无长度可分配，“居中”无从谈起 - IE11 支持基础 Flex 对齐，只需加
display: -ms-flexbox;前缀（仅限必要场景）
示例：<td style="display: flex; align-items: center; min-height: 60px; padding: 0 12px;">✅ 已审核<img src="icon.png" style="max-width:90%">
</td>
真正容易被忽略的是：哪怕代码完全正确，只要单元格没有显式高度约束（height、min-height 或足够 padding），所有垂直对齐方案都会“看不见效果”。这不是 bug，是浏览器渲染机制决定的。
