vertical-align: middle 在 <td> 中直接生效，但在普通 <div> 中无效，因其仅作用于表格单元格、行内元素及替换元素；display: table-cell 可使 <div> 模拟 <td> 从而启用该属性，但需配合明确 height 且避免与 float 或 absolute 共存。
vertical-align: middle 在 <td> 里直接生效，但在普通 <div> 里完全无效——这是最常卡住人的地方。别试 display: block + vertical-align，它不 work。
为什么 display: table-cell 能让多行文本垂直居中
因为 vertical-align 只对表格单元格、行内元素或替换元素（如 <img>）起作用。display: table-cell 把一个 <div> “伪装”成 <td>，从而激活它的 vertical-align: middle 能力。这和原生 HTML 表格里的 valign="middle" 是同一套渲染逻辑。
关键条件必须同时满足：
-
height必须是明确值（如height: 120px），不能是min-height或auto - 容器本身设
display: table-cell，不是子元素 - 不能和
float、position: absolute共存，会失效 - IE6/7 完全不支持；IE8+ 可用，但 IE9–10 有部分渲染异常
flex 布局比 table-cell 更可靠，但要注意兼容性断层
现代项目优先用 display: flex + align-items: center，写法干净、语义清晰、响应式友好。但它在 IE10 及以下不支持 align-items 的完整行为（IE10 支持但需加 -ms- 前缀，IE9 及以下彻底不支持）。
立即学习“前端免费学习笔记（深入）”；
常见错误写法：
-
.box { display: flex; align-items: center; }但没设height→ 容器高度由内容撑开，视觉上“没居中” - 给子元素（如
<p>）加margin: auto→ 在 flex 容器里无效，必须控制容器自身对齐 - 父容器用了
flex-direction: column却还写align-items: center→ 此时它是水平居中，不是垂直
表格单元格（<td>）里多行文本居中失败的真因
vertical-align: middle 在 <td> 上写对了，却没效果？大概率是下面三个原因：
- 单元格内嵌套了块级元素（如
<p>、<div>），而vertical-align不作用于块级子元素 —— 解决办法：给那个子元素也设display: inline-block或直接删掉多余包裹 - 表格行高被其他单元格拉高（比如某列有三行文本，另一列只有一行），导致
middle参照基准偏移 —— 解决办法：统一整行height或用min-height+vertical-align - CSS 框架（如 Bootstrap）或重置样式覆盖了你的
vertical-align—— 查开发者工具看是否被 strike-through，必要时加!important
真正容易被忽略的是：没有一种方法能“无条件通用”。table-cell 依赖固定高，flex 依赖浏览器版本，line-height 只适配单行。选哪一种，得看你实际要兼容的最低环境、容器是否响应式、以及内部结构是否允许改写 DOM 层级。
