vertical-align 仅对行内级元素和表格单元格生效，对块级元素无效；正确用法是作用于 td/th 或 inline/inline-block 元素，复杂居中推荐 flex。

vertical-align 只对行内级元素和表格单元格生效，不是万能的“垂直居中”开关。直接给 div 或 p 加 vertical-align: middle 一定没反应。

为什么 vertical-align 经常失效？

它依赖行框（line box）上下文，而大多数块级元素不参与行框构建：

• vertical-align 对 div、p、section 等块级元素完全无效
• 对 img、span、input、button 有效，但前提是它们是 inline 或 inline-block
• 设了 vertical-align: middle 却没对齐？大概率因为父容器没设 line-height 或子元素 display 类型不匹配
• 表格中写 <tr style="vertical-align: middle"> 是错的——<code>tr 不接受该属性，必须写在 td 或 th 上

  td 和 th 垂直对齐怎么写才对？

  这是 vertical-align 最稳妥的使用场景：

  

  Article To Html

  文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

  下载
  • 正确写法：<td style="vertical-align: middle"> 或统一用 CSS 类：<code>td { vertical-align: middle; }
  • 可选值：top、middle、bottom、baseline（默认）
  • middle 对齐的是单元格的中线，不是视觉正中心；若单元格高度由单行文字撑开，看起来可能偏上
  • 多行文本或嵌套按钮时，vertical-align 会力不从心，此时应改用 display: flex; align-items: center; 在 td 内部启用

  想真正居中复杂内容？别硬扛 vertical-align

  当内容包含多行文字、图标、按钮组合，或需要响应式适配时，vertical-align 的语义和能力都不够用：

  • 给 td 加 display: flex; align-items: center; justify-content: center;，子元素自动垂直+水平居中
  • 需兼容 IE11？加 display: -ms-flexbox; 和 -ms-flex-align: center;（IE11 支持基础 Flex）
  • 避免用 line-height 模拟居中：它只对单行有效，且高度变化时极易错位
  • 注意 min-height：如果 td 高度由内容撑开，align-items: center 仍有效；但如果完全没高度，得显式设 min-height: 48px 之类

  最常被忽略的一点：哪怕你把所有 CSS 都写对了，如果父级样式（比如重置库）偷偷覆盖了 line-height 或 font-size，vertical-align: middle 的参考系就乱了。调试时优先检查 computed styles 里的实际取值，而不是只看自己写的那行代码。

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