vertical-align 只对 inline-block 和 table-cell 生效，因其设计目标是调节行内格式化上下文（ifc）中“原子内联级盒”的垂直位置；块级元素脱离 ifc 进入 bfc，无锚点可依，故该属性无效。
vertical-align 为什么只对 inline-block 和 table-cell 生效
因为它的设计目标就是调节行内格式化上下文（IFC）中“原子内联级盒”（atomic inline-level boxes）的垂直位置，而 inline-block 和 table-cell 是仅有的两类能参与 IFC 同时又允许设置宽高、内外边距的元素。块级元素（如 div 默认 display: block）会脱离 IFC，进入块格式化上下文（BFC），vertical-align 在那里根本没有计算锚点的依据。
设了 display: inline-block 还没效果？检查这三点
常见失效不是属性写错，而是上下文不满足：
- 父容器没有形成有效的行框（line box）：比如父元素设置了
white-space: nowrap但子项溢出被截断，或所有子项都float脱离了 IFC - 子元素本身是空的或只含换行/空白符：此时浏览器可能 fallback 到 margin-bottom 边缘作为基线，
vertical-align: baseline表现不可控 - 兄弟元素 font-size / line-height 差异大：影响整行 text-top/text-bottom 位置，导致
middle对齐点漂移，看起来“没动”
vertical-align: middle 为什么总不像你想象的那样居中
vertical-align: middle 不是对齐到父容器高度中心，而是让元素自身中点对齐到父行框内 text-top 与 text-bottom 的中点——这个中点由父级 font-size 和 line-height 共同决定，且受兄弟元素字体度量干扰。例如：
div {
font-size: 16px;
line-height: 24px; /* text-top ~ 0, text-bottom ~ 24px → 中点在 12px */
}
img {
vertical-align: middle; /* 图片中点会被拉到 12px 高度处 */
}
一旦父级改用 font-size: 1.2rem 或响应式 vw，这个中点就偏移了。
什么时候该直接放弃 vertical-align
以下情况继续硬套 vertical-align 只会增加调试成本：
- 目标是让子元素在父容器中真正垂直居中（无论父高是否固定）→ 改用
display: flex+align-items: center - 需要多行、等高、自适应卡片布局 →
display: grid+place-items: center - 仍需兼容 IE10+ 且必须用行内流 → 至少显式设
vertical-align: top或text-bottom，别依赖默认baseline
真正容易被忽略的是：哪怕所有子项都是 inline-block，只要父容器设了 font-size: 0（常用来消除 inline 元素间空白），vertical-align 的参考系就塌了——text-top/text-bottom 全归零，middle 失去意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
