vertical-align: middle是表格单元格垂直居中的首选方案，专为<td>和<th>设计，需配合足够高度（如padding）才能可靠生效；valign="middle"已废弃，现代项目必须禁用。
vertical-align: middle 是表格单元格垂直居中的首选方案
它专为 <td> 和 <th> 设计，只要单元格有可感知的高度（哪怕由内容撑开），就能可靠生效。现代项目中，valign="middle" 必须禁用——W3C 已在 HTML5 中废弃，React/Vue 等框架会直接忽略该属性，且无法与 Flex/Grid 共存。
推荐统一设置：
td, th {
vertical-align: middle;
text-align: center; /* 常搭配水平居中 */
}若某列需差异化处理，加类名即可：<td class="align-top"> → .align-top { vertical-align: top; }
为什么 vertical-align: middle 有时“不生效”
不是写错了，而是被上下文干扰了：
立即学习“前端免费学习笔记（深入）”；
-
<td>里嵌套了<div>、<p>等块级元素：此时vertical-align对内部元素无效，必须改用 Flex - 单元格高度太小（比如仅靠
line-height: 16px），内容没空间“居中”：建议用padding: 8px 12px提供稳定内边距 - 用了
border-collapse: collapse，但边框视觉占位误导判断：临时加outline: 1px solid red查看真实单元格范围 -
<tr>设了height，但子<td>没设min-height或padding：导致实际渲染高度不足
含图片、按钮或多行内容时，用 Flex 布局替代 vertical-align
一旦单元格内容变复杂（比如 <img> + 文字、<button>、多段 <p>），vertical-align 就失去作用。此时应把 <td> 变成 Flex 容器：
td.flex-center {
display: flex;
align-items: center;
justify-content: center;
min-height: 40px; /* 避免高度塌缩 */
}注意：display: flex 会覆盖 vertical-align，二者不可共存；min-height 比固定 height 更适应响应式场景。
浏览器兼容性与响应式适配要点
vertical-align: middle 在所有现代浏览器及 IE9+ 都支持；Flex 方案需注意 IE10–11 的部分 bug（如 align-items 对 min-height 处理异常），必要时加 height: 100% 回退。
真正容易被忽略的是：垂直居中是否“可见”，取决于单元格是否有足够空间容纳对齐逻辑——没有明确高度参考（哪怕只是 padding），再正确的 CSS 也出不来效果。
