vertical-align: middle 在 中直接生效，但在普通 中无效，因其仅作用于表格单元格、行内元素及替换元素；display: table-cell 可使 模拟 从而启用该属性，但需配合明确 height 且避免与 float 或 absolute 共存。

vertical-align: middle 在 <td> 里直接生效，但在普通 <code><div> 里完全无效——这是最常卡住人的地方。别试 <code>display: block + vertical-align，它不 work。

为什么 display: table-cell 能让多行文本垂直居中

因为 vertical-align 只对表格单元格、行内元素或替换元素（如 <img>）起作用。display: table-cell 把一个 <div> “伪装”成 <code><td>，从而激活它的 <code>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 及以下彻底不支持）。

常见错误写法：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• .box { display: flex; align-items: center; } 但没设 height → 容器高度由内容撑开，视觉上“没居中”
• 给子元素（如 <p></p>）加 margin: auto → 在 flex 容器里无效，必须控制容器自身对齐
• 父容器用了 flex-direction: column 却还写 align-items: center → 此时它是水平居中，不是垂直

表格单元格（<td>）里多行文本居中失败的真因 <p><code>vertical-align: middle 在 <td> 上写对了，却没效果？大概率是下面三个原因： <ul><li>单元格内嵌套了块级元素（如 <code><p></p>、<div>），而 <code>vertical-align 不作用于块级子元素 —— 解决办法：给那个子元素也设 display: inline-block 或直接删掉多余包裹

表格行高被其他单元格拉高（比如某列有三行文本，另一列只有一行），导致 middle 参照基准偏移 —— 解决办法：统一整行 height 或用 min-height + vertical-align

CSS 框架（如 Bootstrap）或重置样式覆盖了你的 vertical-align —— 查开发者工具看是否被 strike-through，必要时加 !important

真正容易被忽略的是：没有一种方法能“无条件通用”。table-cell 依赖固定高，flex 依赖浏览器版本，line-height 只适配单行。选哪一种，得看你实际要兼容的最低环境、容器是否响应式、以及内部结构是否允许改写 DOM 层级。