vertical-align: middle 必须作用于 <td> 或 <th>（display: table-cell 元素）才生效；写在 <tr> 或 <table> 上无效，因其仅对表格单元格生效；常见失效原因包括子元素为块级、单元格高度不足、使用废弃的 valign 属性或容器 display 被错误设为 block。
vertical-align: middle 必须作用在 <td> 或 <th> 上才有效，写在 <tr> 或 <table> 上完全没反应。
为什么 vertical-align: middle 经常“不生效”
不是 CSS 写错了，而是被常见干扰项盖过去了：
-
<td>里嵌套了<div>或<p>：这些子元素默认是块级，vertical-align对它们无效；得把<td>自己设成display: flex才能控制内部布局 - 单元格高度太小，比如只有一行文本加默认
line-height：内容没空间“居中”，视觉上就看不出效果；加padding: 8px 12px或min-height: 40px就稳了 - 用了
border-collapse: collapse但没注意边框本身占像素：临时加outline: 1px solid red能看清真实单元格范围，避免误判 - 写了
valign="middle"：HTML5 已废弃，React/Vue 会直接忽略，且和 CSS 冲突时行为不可预测
水平 + 垂直居中最轻量写法
纯文本表格用这个组合最省事、兼容性最好（IE9+ 都支持）：
<td style="text-align: center; vertical-align: middle;">数据</td>
关键点：
立即学习“前端免费学习笔记（深入）”；
- 两个声明必须同时存在，缺一不可
- 不能只写在
<tr>上——vertical-align只对display: table-cell生效，而<tr>是table-row - 如果整张表都要居中，统一用 CSS 类更干净：
td, th { text-align: center; vertical-align: middle; }
复杂内容（图标+按钮+多行文本）怎么稳居中
一旦单元格里塞了 <img>、<button> 或多个 <p>，vertical-align 就失效了，得升级容器能力：
- 用 Flex：
<td style="display: flex; align-items: center; justify-content: center; min-height: 40px;">
注意：display: flex会覆盖vertical-align，二者不能共存 - 用 Grid（代码更短）：
<td style="display: grid; place-items: center; min-height: 40px;">
但 IE11 不支持place-items，老系统慎用 - 别给
<td>设display: block——这会让它彻底失去表格单元格语义，vertical-align和 flex/grid 都救不回来
表格整体居中别只靠 margin: 0 auto
这个写法看似简单，但最容易踩坑：
- 必须配合明确宽度，比如
width: fit-content或width: 80%；写width: 100%+margin: 0 auto等于没写 - 父容器是
flex或grid时，优先用justify-content: center控制，别在<table>上硬加样式 - 检查有没有
float、display: inline-table或overflow-x: auto的父容器——这些都会让margin: 0 auto失效
真正容易被忽略的是：垂直居中是否“可见”，取决于单元格是否有可感知的高度参考。没有 padding、没有 min-height、也没有内容撑开，再标准的 vertical-align: middle 也出不来效果。
