vertical-align: middle 有时不生效，因其仅对 table-cell、inline 或 inline-block 元素有效；td 默认为 table-cell 故理论上生效，但常因框架样式覆盖（如 bootstrap 设 vertical-align: top）、嵌套块级元素破坏上下文或行高不足导致视觉未居中。

vertical-align: middle 为什么有时不生效

直接给 td 或 th 加 vertical-align: middle 是最常用做法，但它只对 display: table-cell 元素起作用——而默认的 td 就是这个类型，所以理论上应该生效。但实际中常失效，原因有：
• 其他 CSS 规则（比如 Bootstrap 的 .table td 默认设了 vertical-align: top）覆盖了你的设置
• 单元格内嵌套了 div、input 等块级元素，破坏了 table-cell 的垂直对齐上下文
• 行高太小，视觉上“看不出居中”，尤其内容只有单行文字时

强制生效的三种可靠写法

遇到样式被覆盖或布局异常时，优先按顺序尝试以下方法：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 用更具体的选择器，比如 table.my-table td 替代泛用的 td
• 加 !important：写成 vertical-align: middle !important;，能绕过绝大多数框架默认样式冲突
• 把 td 改成 Flex 容器：display: flex; align-items: center; —— 这种方式不依赖表格渲染模型，对含输入框、按钮等复杂子元素的单元格特别稳定

Flex 方式要注意的兼容性细节

如果你选 display: flex 方案，得注意两点：

• align-items: center 只控制交叉轴（即垂直方向），水平居中要额外加 justify-content: center
• 老版本 iOS Safari（flex 在 td 上的支持不稳定，如果必须兼容，回退到 vertical-align + !important
• 别忘了清除子元素的 margin 或 line-height，它们可能把内容顶偏

表格整体居中 vs 单元格内容居中别混了

这是最容易搞错的一点：
• 让整个 table 在页面里居中，用的是 margin: 0 auto 或父容器 display: flex
• 让 td 里的文字/控件在单元格内垂直居中，靠的是 vertical-align 或 align-items
两者作用对象和 CSS 属性完全不同，写反了就白调

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！