vertical-align: middle 对多行块级元素无效，因其仅作用于行框内联内容；真正可靠的解法是给 设置 display: flex 并用 align-items: center 实现垂直居中。

vertical-align: middle 对多行元素根本不起作用

这不是你写错了样式，而是 vertical-align 本身就不处理多行块级内容。它只对“行框（line box）”生效，而 <div>、<code><p></p> 或自然换行的长文本会生成多个行框，vertical-align: middle 实际上只是把第一行的基线拉到单元格中点——视觉上完全看不出居中效果。

常见现象包括：文字顶部紧贴 <td> 上边框、Firefox 和旧 Edge 中表现不一致、加了 <code>height 也没用。

• vertical-align 只影响行内级内容（如纯文本、<span></span>、<img>），对 display: block 的子元素无效
• 即使给 <td> 设了 <code>height: 60px，里面一个 <div> 仍会顶在顶部 <li>别指望靠 <code>line-height 拉高来“骗”居中——多行时它只控制行间距，不改变整体位置

display: flex 是目前最可靠的解法

把 <td> 变成 Flex 容器，用 <code>align-items: center 真正控制整个内容块的垂直位置，不再依赖行高或基线逻辑。

关键点：display: flex 必须直接加在 <td> 上，不是父级 <code><tr> 或 <code><table>；它天然兼容多行、图文混排、按钮+图标等复杂结构。 <ul> <li>水平+垂直居中：<code><td style="display: flex; align-items: center; justify-content: center;">...</td>

• 仅垂直居中+水平左对齐：align-items: center; justify-content: flex-start
• 不用改 <td> 的默认 <code>display: table-cell——Flex 会自动接管对齐行为
• 注意：Flex 会覆盖 vertical-align，所以两者别混用

为什么不能只靠 padding 或 height 模拟居中

有人试过给 <td> 加 <code>padding: 20px 或设固定 height 再调 line-height，但这只是“看起来像”，实际脆弱且不可控。

• 响应式下 padding 不随内容变化，窄屏时文字可能溢出或留白过大
• 不同字号、行高、字体渲染会让“估算”的 padding 值失效
• 如果单元格里有带 margin 的子元素，padding 无法抵消其外边距塌陷
• 这种做法本质是用空间换视觉错觉，不是真正对齐

复杂嵌套内容建议统一用类名控制

真实项目里不会每个 <td> 都写内联 <code>style，容易漏、难维护、无法复用。

推荐定义语义化类名，比如：


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

.cell-center { display: flex; align-items: center; }
.cell-center-vh { display: flex; align-items: center; justify-content: center; }

• 给需要垂直居中的单元格加 class="cell-center"
• 表头和数据列可分开控制：th { text-align: center; } + td.cell-center { ... }
• 避免用 :not() 或过度具体的选择器，否则后期修改成本高

真正麻烦的不是写几行 CSS，而是当单元格里塞进徽章、开关、带 icon 的状态标签时，vertical-align 会彻底失效——这时候 flex 就不是“可选”，而是必须。