valign属性在现代浏览器中已完全失效，html5将其标记为obsolete，chrome/firefox/edge 90+彻底忽略；唯一可靠方案是为td/th设置vertical-align: middle，且需配合足够单元格高度或flex布局兜底。
valign 属性在现代浏览器中完全失效，别再用它——它早在 HTML5 中被标记为 obsolete，Chrome/Firefox/Edge 90+ 已彻底忽略，哪怕你写 <td valign="middle">，也不会有任何效果。
<h3>vertical-align: middle 是唯一靠谱的 CSS 方案</h3>
<p>对 <code><td> 或 <code><th> 直接设置 <code>vertical-align: middle，这是标准、轻量、兼容性最好的做法。
- 只作用于表格单元格（即默认
display: table-cell的元素），对<div> 或 <code><p></p>写这个属性无效 - 必须写在
td或th上，而不是其子元素上 - 效果是否明显，取决于单元格是否有足够高度：如果内容只有一行且没设
height或min-height，视觉上几乎看不出“居中” - 推荐统一用 CSS 类控制，避免内联样式散落：
td.center-vert { vertical-align: middle; } - 当单元格内容是多行文本时，
vertical-align: middle对齐的是**行框（line box）的中点**，不是整个内容块的几何中心 - 字体的
font-size和默认line-height会让首行基线偏高，造成“实际偏上”的观感 - 如果父
<tr> 没撑开高度，或 <code>td被padding/border压缩，也会削弱对齐表现 - 检查是否有全局样式覆盖，比如
td { vertical-align: top; }或table { vertical-align: baseline; } - 给
td加display: flex; align-items: center;，可真正居中所有子节点 - 务必配合
min-height（如min-height: 48px），否则 Flex 容器高度塌陷，居中无从谈起 - 若需水平+垂直双居中，加
justify-content: center; - IE11 需要
-ms-flex-align: center;前缀，但仅限基础对齐，无需担心兼容性断裂 - 换行就崩，图文混排就错位，响应式断点一调就失效
- 固定
height: 100px+vertical-align: middle看似可行，但遇到字体缩放、用户系统字号调整时会偏移 - 更安全的做法是：用
min-height+padding预留空间，再配vertical-align: middle，既稳健又无需 JS 干预
为什么 vertical-align 看起来没居中？常见陷阱
不是属性写错了，而是渲染机制导致的错觉：
复杂内容必须用 Flex 布局兜底
当你在单元格里放图标、按钮、多段文字甚至 <div> 块级容器时，<code>vertical-align 就彻底失灵了——它不处理块级流布局。
别踩 height 和 line-height 的坑
有人用 line-height: 100px 配合单行文本“模拟”垂直居中，这方案脆弱得离谱：
vertical-align 的行框逻辑、并在必要时果断切到 Flex。最常被忽略的，其实是那句：没有高度，就没有居中。
