vertical-align仅对行内级元素（inline、inline-block）和table-cell元素生效，因其专用于行内格式化上下文（IFC）或表格单元格内的垂直对齐，对block、flex、grid等布局中的元素完全无效，浏览器直接跳过计算。
vertical-align 不是“没生效”，而是根本没被浏览器执行——它只在行内格式化上下文（IFC）或 table-cell 布局中参与计算，其他场景下直接跳过解析。
vertical-align 的作用域仅限于行框（line box）和表格单元格
这个属性的设计目标非常具体：解决「一行文字里混着图片、图标、输入框时，它们怎么垂直摆」的问题。它不处理块级布局，也不介入 flex/grid 的轴对齐逻辑。
- 当元素是
display: inline或display: inline-block时，它属于行内级盒子，参与 IFC，vertical-align才会参与行框高度计算和基线定位 - 当元素是
display: table-cell（比如<td>），vertical-align控制的是内容在单元格盒模型内的位置，此时参照物是单元格自身，不是整行 - 对
display: block、display: flex、display: grid的子元素设置vertical-align，DevTools 里能看到声明，但 computed 值始终是baseline，且无任何 layout effect
为什么给 div 加 vertical-align: middle 没反应？
因为 div 默认是 display: block，它生成块级盒，独占一行，不参与行框构建。浏览器压根不把它当作 vertical-align 的候选对象。
- 常见误判：看到 DevTools 中该声明“存在”，就以为生效了；实际只是 CSS 解析器接受了语法，但渲染引擎跳过了计算
- 更隐蔽的坑：父容器用了
display: flex或display: grid，哪怕子元素显式设了display: inline-block，vertical-align依然无效——flex/grid 容器强制子项脱离 IFC - 验证方式：检查 computed 样式中的
vertical-align值是否被覆盖为baseline，且元素是否真的处于 IFC 环境（比如父元素没有display: flex）
inline-block 是唯一“看起来像块、实则听 IFC 调遣”的类型
display: inline-block 是少有的能同时满足两个条件的 display 值：有独立盒模型（可设宽高、padding、border），又参与行内格式化上下文。所以它既支持块级样式，又响应 vertical-align。
立即学习“前端免费学习笔记（深入）”；
- 典型用例：
<img>和<span>并排时，都设为inline-block+vertical-align: middle，才能稳定对齐 - 陷阱：若父容器设置了
line-height，它会直接影响行框高度，从而改变vertical-align: middle的实际位置——这不是 bug，是设计使然 - 注意：即使子元素是
inline-block，如果父容器是display: flex，vertical-align依然被忽略，因为 flex 容器不创建 IFC
想让块级元素垂直居中？别硬套 vertical-align
这是最常踩的语义误用。vertical-align 的 middle 不等于“视觉居中”，它对齐的是 x-height/2 处，受字体、line-height、父元素 font-size 影响极大。
- 可靠方案只有三类：
display: flex+align-items: center；display: grid+place-items: center；或position: absolute+top: 50%+transform: translateY(-50%) - table-cell 方案虽兼容性好，但需额外 wrapper，语义失真，且响应式下难以控制宽度
- 性能上，
transform触发重绘而非重排，比靠margin或padding“猜高度”更稳定；flex/gird 无副作用，但 IE11 对align-items在某些 flex-direction 下有偏差
真正容易被忽略的，不是 vertical-align 怎么写，而是它根本不该出现在 flex 容器里、不该加在 block 元素上、也不该指望它实现父容器内的垂直居中——它的战场只在行内和表格单元格里。
