vertical-align: middle 必须作用于 或 元素，因其仅对 display: table-cell 生效；写在 、 或内部块元素上无效，且需配合明确高度（如 min-height）或 padding 才能显见居中效果。
vertical-align: middle 必须写在 <td> 或 <code><th> 上
<p>它只对 <code>display: table-cell 元素生效，而 <td> 和 <code><th> 默认就是这个值。写在 <code><tr>、<code><table> 或内部的 <code><div> 上完全无效。
<p>常见错误包括：</p>
<ul>
<li>给 <code><button></button> 或 <p></p> 加 vertical-align: middle —— 它们不是 table-cell，不响应这个属性
td { vertical-align: middle; } 却忘了加 text-align: center，结果水平方向仍靠左valign="middle" 还能起作用 —— 它已被 HTML5 废弃，所有现代浏览器都忽略单元格必须有“可感知的高度”才能看出居中效果
vertical-align: middle 是在单元格可用高度内做对齐，如果高度刚好等于内容高度，top/middle/bottom 看起来没区别。
可靠做法是提供明确的空间参考：
- 设
min-height: 40px（比单行文本高一点即可） - 用
padding: 8px 12px提供稳定内边距 —— 比单纯依赖line-height更可控 - 避免只设
height: 24px：固定高度在响应式场景下容易截断多行内容 - 别混用
line-height：它会干扰vertical-align对多行文本的计算逻辑
含图片、按钮或多行内容时，display: flex 是唯一靠谱方案
一旦 <td> 里塞了 <code><img> + 文字 + <button></button>，vertical-align 就彻底失效——它的对齐基于行框基线，不是视觉中心。
正确做法是把单元格变成 Flex 容器：
- 加
display: flex; align-items: center;到<td> 上 <li>必须配 <code>min-height（如min-height: 48px），否则容器高度塌缩，居中无从谈起 - 删掉所有
vertical-align声明 —— Flex 会覆盖它，二者不可共存 - IE11 下需补
-ms-display: flex和-ms-align-items: center，但基础对齐可用 - 临时加
outline: 1px solid red查看<td> 实际渲染边界 <li>检查是否用了 <code>box-sizing: border-box但 padding 设置不对称（比如padding-top: 4px; padding-bottom: 12px） - 若表格嵌套在邮件模板或旧 CMS 中，留意外层
<table> 是否设了 <code>height但子<td> 没设 <code>min-height，导致实际撑不开 真正容易被忽略的是：垂直居中是否“可见”，取决于单元格是否有足够空间容纳对齐逻辑——没有明确高度参考（哪怕只是padding），再正确的 CSS 也出不来效果。
border-collapse: collapse 会让视觉判断失真
启用 border-collapse: collapse 后，相邻边框合并，但单元格真实范围可能比你肉眼看到的小一圈。这时即使写了 vertical-align: middle，也容易误判“没生效”。
调试技巧：
