html5中valign属性已废弃，现代浏览器完全忽略；应改用css的vertical-align（仅对td/th有效）或flex布局（display:flex;align-items:center）实现垂直居中，且需确保单元格有足够高度。
HTML 表格中 valign 属性为什么失效了？
现代浏览器（Chrome/Firefox/Edge 90+）已完全忽略 valign 这个 HTML 属性，哪怕你写在 <td valign="middle"> 里也不会生效。它早在 HTML5 中被标记为<em>过时（obsolete）</em>，W3C 明确不鼓励使用。直接依赖它会导致布局不可控，尤其在响应式或嵌套内容下。
<h3>CSS 的 <code>vertical-align 能替代吗？怎么用才对
vertical-align 确实是标准方案，但它只对 行内元素、表格单元格、表单控件 生效，且行为容易误解——它不是让内容在单元格内“居中”，而是控制该元素相对于其**所在行框（line box）基线**的位置。所以：
- 对
<td> 或 <code><th> 设置 <code>vertical-align: middle是有效的，这是最常用且推荐的做法 - 对单元格内的
<div> 或 <code><p></p>设置vertical-align默认无效（除非把它变成display: inline-block） - 若单元格里只有一行文本，
vertical-align: middle看起来像居中；但一旦换行或含图片，就可能偏移
正确写法示例：
| 顶部对齐 | 垂直居中 | 底部对齐 |
当 vertical-align 不够用时，用 Flex 布局强行居中
遇到复杂内容（比如多段文字 + 图标 + 按钮）、或者需要精确控制内边距与对齐关系时，vertical-align 就力不从心了。这时把单元格变成 Flex 容器是最稳妥的兜底方案：
- 给
<td> 加 <code>display: flex; align-items: center; justify-content: center;，即可真正居中所有子元素 - 注意：如果单元格内有块级元素（如
<p></p>），默认会撑满高度，需确保父<td> 有明确高度或最小高度（例如 <code>min-height: 48px） - 兼容性没问题——Flex 在所有现代浏览器和 IE11+ 都支持（IE11 需加
-ms-前缀，但仅限基础对齐）
简例：
<td style="display: flex; align-items: center; min-height: 60px;"> <span>✅ 已审核</span> @@##@@ </td>
表格整体高度塌陷导致垂直对齐“看不见”
即使写了 vertical-align: middle，如果整行 <tr> 高度由内容撑开（比如只有单行文字），那“居中”效果几乎不可见——因为单元格实际高度 ≈ 文字行高。此时必须人为干预行高：
<ul><li>给 <code><tr> 设 <code>height 或 min-height（如 height: 80px）
<td> 设 <code>height + vertical-align: middle
<tr> 使用 <code>height 同时又设 vertical-align，某些旧版 Safari 下可能冲突
关键点：垂直对齐是相对“可用空间”的操作，没空间，就无对齐可言。
真正麻烦的不是选哪个属性，而是意识到 valign 是死的，vertical-align 是有前提的，而 Flex 是万能但要小心高度塌陷——三者之间没有“升级替代”关系，只有场景适配。
