valign属性在现代HTML中已完全失效，Chrome/Firefox/Edge 90+彻底忽略，W3C标记为obsolete；唯一标准方案是为td/th设置vertical-align: middle，且需配合足够高度或Flex布局（display: flex; align-items: center）才能确保视觉居中。
valign 属性在现代 HTML 中已完全失效，别再指望它起作用——Chrome/Firefox/Edge 90+ 已彻底忽略，W3C 标准里它被标记为 obsolete，连验证器都会报错：Attribute valign is obsolete. Use CSS instead.
vertical-align: middle 是唯一标准替代方案
对 <td> 或 <th> 直接设置 vertical-align: middle，这是目前最轻量、兼容性最好（IE8+）、语义最清晰的写法。
- 只对表格单元格（
display: table-cell）生效，不能设在<tr>、<div>或子元素上 - 值选
top/middle/bottom即可，baseline仅在图文混排且字号不一时有用 - 必须配合明确高度参考：若单元格靠内容撑高（比如单行文字），
middle视觉上几乎不可见 - 推荐用 CSS 类统一管理，避免内联样式散落：
td.center-vert { vertical-align: middle; }
为什么 vertical-align 看起来没居中？常见渲染陷阱
不是代码写错了，而是 vertical-align 对齐的是“行框（line box）中点”，不是单元格几何中心。
- 多行文本会生成多个行框，
middle实际对齐的是首行基线附近，常显得偏上 - 字体
font-size和默认line-height会抬高首行基线，进一步加剧视觉偏差 - 全局样式如
td { vertical-align: top; }或table { vertical-align: baseline; }会直接覆盖你的设置 - 用了
border-collapse: collapse后，若没加padding，内容会紧贴边框，看起来像“没对齐”
复杂内容必须用 Flex 布局兜底
当单元格里有 <img>、<button>、<p> 或多段文字时，vertical-align 彻底失效——它不处理块级流布局。
立即学习“前端免费学习笔记（深入）”；
- 给
<td>加display: flex; align-items: center;，可真正居中所有子节点 - 必须设
min-height（如min-height: 48px），否则 Flex 容器高度塌陷，居中无从谈起 - 需要水平+垂直双居中？补上
justify-content: center; - IE11 需加
-ms-flex-align: center;，但基础居中完全可用，无需额外 polyfill
真正容易被忽略的点：高度控制比对齐属性更重要
哪怕 vertical-align: middle 和 display: flex 都写对了，如果 <td> 没有可参照的高度（比如没设 height、min-height，也没被内容撑开），所有对齐都等于白搭。这不是 bug，是渲染机制决定的——没有高度参考，就没有“中点”可对齐。
