vertical-align: middle 是 html 表格中让文字垂直居中的最直接有效写法，仅对 td/th 元素生效；valign 已废弃，应全量迁移至 css 控制；若失效需检查单元格高度、嵌套结构及 line-height；复杂布局推荐 flex 方案。
vertical-align: middle 是最直接有效的写法
HTML表格里让文字垂直居中，vertical-align: middle 就是核心解法。它作用于 td 或 th 元素，不是 table 或 tr —— 后两者设了也无效。
常见错误是把 vertical-align 写在 tr 上，或者误以为给 table 加 style="vertical-align: middle" 就能生效。实际只有单元格级元素才响应这个属性。
- 内联写法：
<td style="vertical-align: middle">内容</td> - CSS类统一控制（推荐）：
td, th { vertical-align: middle; } - 注意：该属性默认值就是
middle，但浏览器可能因其他样式覆盖而失效，显式声明更可靠
valign 属性已被废弃，别再用
valign 是 HTML4 时代的旧属性，比如 <td valign="middle">。它在现代浏览器虽仍能工作，但不符合 HTML5 规范，W3C 明确标记为“过时（obsolete）”，且无法被 CSS 覆盖或继承，维护性差。
<p>真实踩坑场景：团队协作中混用 <code>valign 和 vertical-align，导致部分单元格对齐不一致；或者用构建工具自动移除内联属性时，valign 被删掉而没补 CSS，页面直接错位。
- 不要写：
<tr valign="middle"> 或 <code><td valign="center">（<code>center不是合法值，应为middle） - 替代方案只有一条：全量迁移到
vertical-align+ CSS 类 - 如果必须兼容极老系统（如 IE6），可保留
valign作降级，但主逻辑必须靠 CSS -
td高度太小：若内容行高 > 单元格高度，vertical-align会“挤”不出居中空间，加min-height或padding才看得清效果 - 内部嵌套了
div或p：块级子元素会撑开单元格，但vertical-align只对行内内容或 table-cell 内的直接子元素生效；此时需给子容器也设display: inline-block或改用 Flex - 父级有
line-height干扰：尤其当td里只有一行文本时，line-height过大会导致视觉偏移，建议重置为normal或与font-size匹配 - 单行居中：
<td style="display: flex; align-items: center; justify-content: center"> <span>✅</span>完成</td> - 多行文字顶部对齐但垂直居中容器：
align-items: center; flex-direction: column; - 兼容性注意：IE10+ 支持 Flex，若需支持 IE9，退回
vertical-align+ 固定height+line-height组合
vertical-align 不起作用？先查这三件事
写了 vertical-align: middle 却没效果，大概率不是语法错，而是布局上下文出了问题。
复杂内容用 Flex 布局更稳
当单元格里塞了图标+文字+按钮，或者要同时水平+垂直居中，vertical-align 就力不从心了。这时候把 td 当成 Flex 容器更可控。
关键点在于：必须显式设 display: flex，否则 align-items 和 justify-content 不生效。
真正容易被忽略的是：Flex 方案下，vertical-align 属性完全失效，二者不可混用；一旦用了 display: flex，就彻底告别传统表格对齐逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
