vertical-align 仅对 、 或 display: table-cell 元素生效；误用于 或 无效；多行内容时推荐用 display: flex 替代。
vertical-align 不起作用？先确认作用对象是否正确
vertical-align 只对 <td>、<code><th> 或设置了 <code>display: table-cell 的元素生效。如果你把它写在 <div> 或 <code><p></p> 上，浏览器会直接忽略——这不是 bug，是规范行为。
常见误用场景：
- 给
<tr> 设置 <code>vertical-align: middle→ 无效（<tr> 不是 table-cell）<li>给单元格内嵌套的 <code><span></span>设置vertical-align→ 它只影响行内上下对齐，不改变单元格内整体位置 - 没设高度或内容撑不开单元格 → 看不出居中效果，尤其单行文本在默认行高下容易“看起来没动”
- 用无单位数值（如
line-height: 1.6），避免固定像素值导致缩放或字体变化时错位 - 搭配
font-size使用：若font-size: 14px，line-height: 2就等于 28px 垂直间距 - 不要和
vertical-align混用期望“双重居中”——vertical-align定位置，line-height定行距，二者职责不同 - 如果表格需要响应式收缩，flex 容器内的文字可能换行，需配合
white-space: nowrap或word-break: break-word -
border-spacing：仅在border-collapse: separate时生效，控制单元格之间的间隙（包括上下），单位为 px/em -
padding：直接增加文字到单元格边框的距离，padding-top和padding-bottom对垂直留白最直接 - 三者叠加效果：视觉间距 ≈
padding-top+line-height+padding-bottom（若无border-spacing）
line-height 是竖排文字的垂直间距关键
当表格启用竖排（writing-mode: vertical-rl 或 vertical-lr），line-height 控制的是文字“上下行之间的距离”，也就是视觉上的垂直间距。此时它不再左右拉伸，而是沿文字流向延伸。
推荐写法：
多行文本或复杂内容时，vertical-align 会失效？试试 flex
如果单元格里有换行文本、图标 + 文字组合、或者用了 display: block 的子元素，vertical-align: middle 往往失灵——因为它的对齐基准是“行框基线”，而块级子元素会破坏这个上下文。
更可靠的做法是把 <td> 变成 flex 容器：<pre class="brush:php;toolbar:false;">td {
display: table-cell; /* 保持表格语义 */
vertical-align: middle; /* 降级 fallback */
}
<p>td.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
</p></pre>
<p>注意点：</p>
<ul><li>flex 方案兼容性好（IE11+ 支持 <code>display: flex on <td>）<li>避免同时设置 <code>height 和 align-items: center 导致内容被截断；优先用 min-height
border-spacing 和 padding 会影响视觉垂直间距
表格的“视觉垂直间距”不只是文字内部的 line-height，还包括单元格之间的空隙和内边距。这两个属性常被忽略，但实际影响很大：
建议统一用 padding 控制内边距，border-spacing 仅用于需要隔开单元格的网格型表格（如数据仪表盘），避免混用造成计算混乱。
