vertical-align: middle 必须作用于 <td> 或 <th> 元素，因其仅对 display: table-cell 生效；写在 <tr>、<table> 或内部块元素上无效，且需配合明确高度（如 min-height）或 padding 才能显见居中效果。

vertical-align: middle 必须写在 <td> 或 <th> 上

它只对 display: table-cell 元素生效，而 <td> 和 <th> 默认就是这个值。写在 <tr>、<table> 或内部的 <div> 上完全无效。

常见错误包括：

• 给 <button> 或 <p> 加 vertical-align: middle —— 它们不是 table-cell，不响应这个属性
• 在全局样式里写 td { vertical-align: middle; } 却忘了加 text-align: center，结果水平方向仍靠左
• 用框架（如 React）动态生成表格时，误以为 valign="middle" 还能起作用 —— 它已被 HTML5 废弃，所有现代浏览器都忽略

单元格必须有“可感知的高度”才能看出居中效果

vertical-align: middle 是在单元格可用高度内做对齐，如果高度刚好等于内容高度，top/middle/bottom 看起来没区别。

可靠做法是提供明确的空间参考：

立即学习“前端免费学习笔记（深入）”；

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 设 min-height: 40px（比单行文本高一点即可）
• 用 padding: 8px 12px 提供稳定内边距 —— 比单纯依赖 line-height 更可控
• 避免只设 height: 24px：固定高度在响应式场景下容易截断多行内容
• 别混用 line-height：它会干扰 vertical-align 对多行文本的计算逻辑

含图片、按钮或多行内容时，display: flex 是唯一靠谱方案

一旦 <td> 里塞了 <img> + 文字 + <button>，vertical-align 就彻底失效——它的对齐基于行框基线，不是视觉中心。

正确做法是把单元格变成 Flex 容器：

• 加 display: flex; align-items: center; 到 <td> 上
• 必须配 min-height（如 min-height: 48px），否则容器高度塌缩，居中无从谈起
• 删掉所有 vertical-align 声明 —— Flex 会覆盖它，二者不可共存
• IE11 下需补 -ms-display: flex 和 -ms-align-items: center，但基础对齐可用

border-collapse: collapse 会让视觉判断失真

启用 border-collapse: collapse 后，相邻边框合并，但单元格真实范围可能比你肉眼看到的小一圈。这时即使写了 vertical-align: middle，也容易误判“没生效”。

调试技巧：

• 临时加 outline: 1px solid red 查看 <td> 实际渲染边界
• 检查是否用了 box-sizing: border-box 但 padding 设置不对称（比如 padding-top: 4px; padding-bottom: 12px）
• 若表格嵌套在邮件模板或旧 CMS 中，留意外层 <table> 是否设了 height 但子 <td> 没设 min-height，导致实际撑不开

真正容易被忽略的是：垂直居中是否“可见”，取决于单元格是否有足够空间容纳对齐逻辑——没有明确高度参考（哪怕只是 padding），再正确的 CSS 也出不来效果。