vertical-align只对inline-block生效，因其专为行内格式化上下文（IFC）设计，inline-block既是原子内联级盒又参与IFC；其默认baseline对齐因各元素基线位置不同（如img底边向上4px、button依赖字体度量）导致视觉错位；vertical-align:middle实际对齐的是行框内text-top与text-bottom中点，并非父容器中心，受font-size、line-height等影响易漂移；稳定对齐应显式设top/text-bottom，复杂布局宜改用flex或grid。
vertical-align 为什么只对 inline-block 生效
因为 vertical-align 的设计目标就是调节行内格式化上下文（IFC）中“原子内联级盒”（atomic inline-level boxes）的垂直位置，而 inline-block 元素正是这类盒子：它内部按块布局（可设宽高、有 margin/padding），但**自身参与 IFC，作为单个不可分割的行内单元**。浏览器据此计算行框（line box）高度，并依据 vertical-align 值决定该盒子在行框内的锚点位置。
inline-block 默认 baseline 对齐为何总出错
所有 inline-block 元素默认 vertical-align: baseline，但这不是统一的“一条线”，而是依赖各自内容的字体度量：
-
<img>的 baseline 在图片底边向上约 4px 处（预留 descender 空间） - 含文字的
<button>基线由内部文本 font-size 和 line-height 决定 - 空
<button>可能 fallback 到 margin-bottom 边缘，基线位置漂移
结果就是视觉上“一高一低”，并非渲染 bug，而是规范行为。
middle 为什么经常不居中
vertical-align: middle 并非让元素垂直居中于父容器，而是将其**自身中点**对齐到父行框内 text-top 与 text-bottom 的中点——这个参考点受父级 font-size、line-height、甚至兄弟元素字体差异影响，极易漂移。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 响应式场景下避免用
middle，尤其父容器使用rem或vw动态调整字号时 - 需要稳定底部对齐 → 统一设
vertical-align: text-bottom - 需要顶部对齐 → 直接用
vertical-align: top，不依赖字体度量，行为确定
什么时候该放弃 vertical-align
当你发现要反复微调 vertical-align 值、或父容器用了 flex/grid 却还在硬套它，说明已脱离适用场景。
vertical-align 不是万能对齐工具，它是 IFC 下的精细调节开关，不是块级布局方案：
- 目标是让子元素在父容器中垂直居中 → 改用
display: flex+align-items: center - 目标是多列卡片网格对齐 → 改用
display: grid+place-items: center - 仍需兼容老浏览器且必须 inline-block 布局 → 至少显式设
top或text-bottom，别留默认值
真正容易被忽略的是：哪怕所有子项都是 inline-block，只要父容器设了 line-height: 0 或 font-size: 0，text-bottom 和 top 的行为也会失效——因为它们的参考系（em-box）消失了。
