vertical-align 对 display: block 元素完全无效，因其仅作用于行内格式化上下文（IFC）中的 inline、inline-block 和 table-cell 元素；块级元素脱离 IFC，浏览器直接忽略该属性，不报错也不渲染。
vertical-align 对 display: block 元素完全无效，不是 bug，是规范设计如此——它压根就不该管块级盒子。
vertical-align 只在行内格式化上下文（IFC）里干活
它的作用域非常明确：只参与 inline、inline-block、table-cell 这几类元素之间的基线对齐。一旦元素是 display: block，它就脱离了“一行内多个盒子排排坐”的上下文，浏览器直接跳过该属性，不报错、不警告、也不渲染任何效果。
常见错误现象包括：
- 给一个
div写vertical-align: middle，页面毫无变化 - 在 flex 容器里给子项加
vertical-align，结果被align-items覆盖且控制台无提示 - 把
img和div放在同一父容器中，img设了vertical-align，但div强制换行，整行 IFC 被打断，对齐失效
为什么 inline-block 能用 vertical-align 却像块级元素？
关键在 display 的双重身份：inline-block 生成的是块级盒子（可设宽高、有 margin/padding、内容按块布局），但它仍参与行内格式化上下文（IFC），所以 vertical-align 对它有效。
立即学习“前端免费学习笔记（深入）”；
使用时必须确保：
- 父容器没有破坏 IFC，即不能是
display: flex、display: grid或display: table - 子元素本身是
inline或inline-block，不能是block - 父容器显式设置了
line-height（比如line-height: 24px），否则基线位置不可控
vertical-align: middle 不等于“视觉居中”
它对齐的是“父元素基线 + x-height / 2”，而 x-height 来自父元素的字体，不是图片或图标的尺寸。所以即使你写对了，也常看到图标偏高。
真正起效的组合是：
- 父容器有明确
line-height（如line-height: 60px，至少 ≥ 子元素最大高度） - 至少两个行内级兄弟元素（哪怕是一个空格或隐藏文本节点）——单个
img加vertical-align: middle基本没反应 - 子元素设为
display: inline-block或保持默认inline（如img）
如果目标是让一个块级元素在父容器中垂直居中，vertical-align 是错误工具。该用 display: flex + align-items: center，或 position: absolute + top: 50% + transform: translateY(-50%)。
最容易被忽略的调试盲区
不是样式没写对，而是上下文消失了：
- 父容器用了
display: flex，子元素的vertical-align就自动作废 - 父容器
line-height是normal或未设置，基线浮动，middle没有稳定参照 - HTML 中换行或空格生成了不可见文本节点，悄悄改变了基线位置
- 试图用
span { line-height: 0 }“压缩间隙”，这不影响vertical-align，反而可能让文字不可读
真要靠 vertical-align 解决问题，先确认你在 IFC 里；否则，换方案比硬调更省时间。
