vertical-align: middle 对多行文字失效是因为它只作用于行框而非块级元素，导致按第一行基线对齐；应改用 display: flex + align-items: center 实现真正垂直居中，并注意设置 min-height 和兼容性回退。
vertical-align: middle 对多行文字为什么经常失效
不是 vertical-align: middle 写错了，而是它根本没起作用——这个属性只对“表格单元格本身”生效，一旦单元格内是多行文本（比如换行的 <p>、<div> 或自然折行的长段落），它的垂直对齐逻辑就退化为“按第一行基线对齐”，视觉上完全看不出居中效果。
常见错误现象包括：文字顶部紧贴单元格上边框、底部悬空、或在不同浏览器中表现不一致（尤其 Firefox 和旧版 Edge）。
-
vertical-align只影响单元格内**行框（line box）** 的排列，不控制块级子元素的位置 - 多行文本会生成多个行框，
vertical-align: middle无法统一对齐它们 - 即使设置了
height或min-height，若未配合足够padding，内容仍会“挤”在顶部
用 display: flex 替代 vertical-align 实现真正居中
把 <td> 变成 Flex 容器，是目前最可靠、语义清晰且兼容性可控的解法。它不依赖行高、不关心内容行数，直接对整个内容块做交叉轴对齐。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 必须给
<td>显式设置display: flex，否则align-items不生效 -
align-items: center控制垂直居中，justify-content: center控制水平居中（可选） - 务必加
min-height（如min-height: 40px），避免内容少时容器塌缩导致居中“失效” - 不要同时写
vertical-align—— Flex 会完全覆盖它，二者不可共存
示例：
td.flex-center {
display: flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 8px;
}兼容 IE10–11 的 flex 回退写法
IE10–11 对 min-height 在 Flex 容器中的支持有 bug，可能导致内容贴顶。这时需要加一层 height 回退：
- 优先用
min-height保证响应式弹性 - 对 IE 加
height: 100%并配合父<tr>设置height（或至少min-height） - 用
@supports not (display: flex)或条件注释（已不推荐）区分，更稳妥的是用现代构建工具自动注入前缀或回退规则
简单回退方案（无需 JS）：
td.flex-center {
min-height: 48px;
height: auto;
}
@supports (display: flex) {
td.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
}
/* IE10–11 fallback */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
td.flex-center {
height: 48px;
}
}别忽略单元格高度来源这个隐性前提
无论用 vertical-align 还是 flex，只要单元格没有可感知的高度参考，居中就只是“理论上成立”。这个高度可以来自：
- 显式
height或min-height - 上下对称的
padding（如padding: 12px 8px） - 内容撑开（但多行文字撑开高度不可控，不建议依赖）
最容易被忽略的是：当表格用了 border-collapse: collapse，边框会“吃掉”一部分视觉高度，导致你以为有空间，实际渲染区域比预期小。临时加 outline: 1px solid red 查看真实单元格范围，能快速定位问题。
