valign 属性在 HTML5 中已废弃，应使用 CSS 的 vertical-align 替代，但仅对 td、th、img、span 等行内级或表格单元格元素有效；多行内容垂直居中推荐 flex 布局，调试时需检查 display 类型、line-height 和 computed styles。
valign 属性在现代 HTML 中已废弃，别再用
HTML5 标准里 valign 属性（比如 <td valign="middle">）已被完全移除，浏览器虽大多仍兼容，但会触发 HTML 验证警告，且在严格模式或 XHTML 环境下直接失效。它不是“还能凑合”，而是“不该再写”。
用 CSS 的 vertical-align 替代 valign，但注意作用对象
vertical-align 是唯一正确替代方案，但它只对 <td>、<th>、<img>、<span> 等**行内级或表格单元格元素**生效，不能设在 <table> 或 <tr> 上——设了也没用。
常见错误写法：<tr style="vertical-align: middle"> → 无效；正确写法是：<td style="vertical-align: middle"> 或统一写在 CSS 类里：
td.center-vert { vertical-align: middle; }
可选值包括：top、middle、bottom、baseline（默认），其中 middle 对齐的是单元格的**中线**，不是视觉正中心（尤其当单元格高度由内容撑开时）。
立即学习“前端免费学习笔记（深入）”；
多行文本或复杂内容垂直居中需额外处理
如果 <td> 里有换行文本、按钮、图标组合，vertical-align: middle 只能对齐行框基线，常显得偏上。这时得用更可靠的布局方式：
- 给
<td>加display: flex; align-items: center;（推荐，兼容性到 Chrome 29+/Firefox 20+/Edge 12+） - 若需支持 IE10–11，改用
display: table-cell; vertical-align: middle;（注意：此时子元素不能再设flex，否则冲突） - 避免用
line-height模拟居中——仅适用于单行纯文本，且高度必须固定
border-collapse 和 padding 会影响视觉对齐效果
表格边框合并状态会改变单元格实际可用空间：border-collapse: collapse 下，padding 是唯一控制内容离边距离的方式；而 separate 模式下，border-spacing 也会挤占空间。哪怕 vertical-align 设对了，padding 过小或 border-spacing 过大，都会让内容看起来“没居中”。
调试建议：
- 临时加
outline: 1px solid red查看<td>实际边界 - 检查是否意外继承了父级或重置 CSS 的
line-height（它会放大/压缩行高，干扰vertical-align） - 用浏览器开发者工具悬停查看 computed styles，确认
vertical-align是否被覆盖或计算为baseline
真正麻烦的从来不是怎么写居中，而是为什么写了却没效果——往往卡在 display 类型、父容器约束或隐式 line-height 上。动手前先看一眼 computed styles，比查文档更快。
