valign属性在现代浏览器中已失效，因HTML5将其标记为过时，Chrome/Firefox/Edge 90+完全忽略；应改用CSS的vertical-align（仅对td/th有效）或Flex布局（display:flex;align-items:center）实现垂直对齐。
valign 属性在现代浏览器里基本没用——它已被 HTML5 废弃，Chrome/Firefox/Edge 90+ 完全忽略，哪怕你写 <td valign="middle"> 也无效。
为什么 valign 不生效？
不是你写错了，是浏览器主动无视它。HTML5 规范已将 valign 标记为 obsolete（过时），W3C 明确不鼓励使用。常见失效场景包括：
- 表格嵌套在 Flex 或 Grid 容器中
- 全局 CSS 里写了
td { vertical-align: top; } - 单元格内含图片、多行文本或设置了
line-height - 整行
<tr>没有显式高度，导致“居中”视觉上不可见
vertical-align 怎么用才对？
这是目前唯一标准、可靠的方式，但只对 <td>、<th> 或 display: table-cell 元素生效。关键点：
- 直接设在
<td>上：<td style="vertical-align: middle;"> - 不要给内部的
<p>或<div>设vertical-align——默认无效，除非加display: inline-block - 必须配合足够高度才能看出效果：单行文字撑不开高度，
vertical-align: middle就像没设一样 - 值选
top/middle/bottom即可，baseline仅在混排图文且字号不一时有用
复杂内容垂直居中必须用 Flex
当单元格里不止一行文字，还带图标、按钮、空隙或需要精确控制内边距时，vertical-align 就会偏移或失效。这时唯一靠谱方案是：
立即学习“前端免费学习笔记（深入）”；
- 给
<td>加display: flex; align-items: center; justify-content: center; - 必须设
min-height或height，否则 Flex 容器高度塌陷，居中无从谈起 - IE11 需补
-ms-flex-align: center;，但基础居中完全可用 - 注意：如果单元格内已有
<p>这类块级元素，它们默认占满宽度，不影响 Flex 布局，但需确认没有margin把内容顶出可视区
真正容易被忽略的是：垂直对齐效果是否可见，取决于单元格有没有“足够高度”。哪怕所有样式都写对了，<td> 高度由内容撑开，vertical-align: middle 依然等于没写。
