vertical-align仅对inline、inline-block、table-cell元素生效，块级元素（如div、p）设置该属性会被浏览器忽略；其作用域限于行框内对齐，非整体容器居中方案。
vertical-align 只对行内和 table-cell 元素生效
因为 vertical-align 的规范定义就限定了适用范围：它只作用于 display 值为 inline、inline-block、inline-table 或 table-cell 的元素。块级元素（如默认的 div、p、h1）天然不在此列，浏览器直接忽略该声明——不是“没效果”，而是“根本不处理”。
为什么 inline-block 上设了 vertical-align 还是不对齐
常见错觉是“加了 display: inline-block 就能用 vertical-align”，但实际对齐结果受多重隐式因素干扰：
- 父容器未设
line-height，依赖浏览器默认值（约 1.2），该值随font-size缩放，导致middle实际对齐点漂移 - 子元素中混有不同
font-size的文字（如标题 + 副文本），它们的基线不一致，而vertical-align只能按整行统一参考 -
vertical-align: middle对图片的“中点”计算基于其自身高度，但若图片含透明边距、SVG 未设viewBox，渲染高度不稳定 - 空的
inline-block元素（无文本内容）的基线是其 margin 底边缘，而非视觉中心，此时middle会严重偏上
响应式场景下 vertical-align: middle 更容易失效
在移动端或 rem/vw 布局中，vertical-align: middle 的“中点”是动态计算的：它取父元素小写字母 x 的高度一半作为基准，而 x-height 随 font-size 变化非线性浮动。结果就是：
- 字号缩小时，图标看起来突然上浮半像素
- 横屏多列
inline-block卡片底部参差不齐 - 换行后行框（line box）高度重算，同一组元素对齐基准突变
此时 vertical-align: text-bottom 是更稳的选择——它把图片底边直接对齐到父元素 font-size 定义的 em-box 底边，完全绕开基线与中点计算。
立即学习“前端免费学习笔记（深入）”；
真正需要垂直居中时，别硬套 vertical-align
当目标是让整个块（比如一个带标题、描述、按钮的卡片）在其父容器中垂直居中，vertical-align 不是解决方案，而是障碍。它无法响应换行、不能控制主轴分布、也不支持子项数量变化。
可靠做法是切换技术栈：
- 父容器加
display: flex和align-items: center - 或用
display: grid配合place-items: center - 绝对定位 +
transform: translate(-50%, -50%)仅适用于已知宽高的固定尺寸场景
最易被忽略的一点：很多人试图用 vertical-align 解决“块级容器内整体居中”，却忘了它从设计之初就不是为这个任务存在的——它的战场从来只是行框（line box）内部那一小片区域。
