直接给<td>或<th>设text-align:center和vertical-align:middle可解决大部分居中需求，但需确保单元格有高度基准；vertical-align仅对table-cell元素生效，设在tr或div上无效；多元素布局推荐flex替代。
直接给 <td> 或 <th> 加 text-align: center 和 vertical-align: middle 就能解决大部分场景，但必须确保单元格有可参照的高度基准，否则 vertical-align: middle 会“失效”——不是没生效，而是没地方可对齐。
vertical-align: middle 必须作用在 td/th 上
vertical-align 只对 display: table-cell 元素有效，也就是默认的 <td> 和 <th>。设在 <table>、<tr> 或包裹的 <div> 上完全无效。
- ✅ 正确：
<td style="vertical-align: middle">内容</td> - ❌ 无效：
<tr style="vertical-align: middle"><td>内容</td></tr> - ❌ 无效：
<td><div style="vertical-align: middle">内容</div></td>（<div>默认是block，不支持vertical-align）
vertical-align 看不见效果？先查 height 和 line-height
vertical-align: middle 是相对单元格“行盒高度”计算的，不是绝对居中。如果单元格没显式高度，浏览器按内容撑开，视觉上就看不出居中。
- 单元格高度太小（如
height: 20px），而文字默认line-height是 1.2 倍字号，内容会被压到顶部 - 没设
line-height，或line-height小于容器高度，基线偏移导致视觉上偏高 - 多行文本时，
vertical-align: middle对齐的是整块“行盒”的中点，不是每行文字中心——这是标准行为 - 更稳妥做法：用
padding: 8px 12px替代硬设height，留出自然呼吸空间
单元格里塞了 div/button/图标？别硬扛 vertical-align
当 <td> 内含多个块级元素（比如图标 + 文字 + 按钮），vertical-align 往往控制不了布局节奏，这时该切到 display: flex。
立即学习“前端免费学习笔记（深入）”；
- 给
<td>加style="display: flex; align-items: center; justify-content: center;"，子元素真正居中 - 只需垂直居中、水平左对齐？用
align-items: center; justify-content: flex-start - 注意：
flex会覆盖vertical-align，且要求父单元格保持display: table-cell（默认就是，不用额外写） - 慎用于成百上千单元格——每个
flex容器都增加渲染开销；纯文本仍优先用vertical-align
别混用 align="center" 和 CSS 居中
align 和 valign 属性在 HTML5 中已废弃，继续用会导致校验失败、WebView 行为不一致、无障碍工具忽略，而且和 CSS 冲突时结果不可预测。
- ❌ 避免：
<td align="center" valign="middle">内容</td> - ✅ 统一用：
<td style="text-align: center; vertical-align: middle;">内容</td> - 整表批量控制推荐：
table td, table th { text-align: center; vertical-align: middle; }，漏掉th是常见疏忽
真正麻烦的不是怎么写样式，而是当单元格里嵌套了 <p>、<div> 或设置了 margin/line-height 的元素时，那些隐性样式会悄悄干扰 vertical-align 的表现——得一层层 inspect 计算后的行盒高度，而不是只盯着 CSS 规则看。
