vertical-align 仅对行内级元素和表格单元格生效，因其设计初衷是调节行内格式化上下文（IFC）中行内盒的基线对齐，对块级元素无效；inline-block 元素因参与 IFC 而支持该属性。
vertical-align 只对行内级元素和表格单元格生效
vertical-align 的设计初衷不是控制块级盒子（如 div、p、section）的垂直位置，而是调节**行内格式化上下文（IFC）中行内盒**的基线对齐关系。当你给一个 display: block 的元素设置 vertical-align: middle，浏览器会默默忽略它——没有报错，也不起作用。
常见错误现象包括：在 flex 或 grid 出现前，有人试图用 vertical-align 居中一个 div，结果毫无反应；或把 img 和 span 放在同一行却没意识到 img 默认是 inline，而紧挨着的 div 会强制换行、退出 IFC，导致对齐失效。
为什么 inline-block 元素能用 vertical-align 却看起来“像块级”
关键在于 display: inline-block 的双重身份：它生成的是**块级盒子（有自己的 box model、可设宽高、内容按块布局）**，但**参与的是行内格式化上下文（IFC）**，所以 vertical-align 对它有效。
使用场景举例：让图标 img 与文字按钮 span 垂直居中对齐；或多个 inline-block 卡片并排时统一底部对齐。
立即学习“前端免费学习笔记（深入）”；
- 必须确保父容器是 IFC（即没有
display: flex/grid/table等破坏 IFC 的声明） -
vertical-align的值（如top、middle、text-bottom）参照的是整行的行框（line box），不是父容器高度 - 若父容器有
line-height，它会直接影响行框高度，从而改变vertical-align: middle的实际位置
想对块级盒子做垂直对齐？别硬套 vertical-align
当目标是让一个块级元素在其父容器中垂直居中，vertical-align 不是解决方案，而是误入歧途的信号。现代可靠做法有明确分工：
- 父容器
display: flex→ 子项加align-items: center - 父容器
display: grid→ 子项加justify-self: center; align-self: center，或整体设place-items: center - 绝对定位 +
transform: translateY(-50%)（需先top: 50%）——兼容性好但需手动处理定位上下文 - 表格模拟（
display: table-cell+vertical-align: middle）——仅限简单结构，语义失真且响应式困难
性能提示：transform 方案触发重绘而非重排，比靠 margin 或 padding “猜高度”更稳定；flex/gird 方案无副作用，但 IE11 对 flex 的 align-items 支持有细微偏差。
容易被忽略的 baseline 对齐陷阱
即使所有子元素都是 inline 或 inline-block，vertical-align 的行为仍可能出人意料——因为默认对齐基准是基线（baseline），而不同元素的基线位置不同：
- 文本的基线在字母 x 底部；
img的基线在图片底边；input的基线在框体底部附近 - 所以
img和纯文本并排时，默认会“下沉”几像素（因图片底边对齐文本基线，而非底部） - 解决方法不是调
vertical-align值去凑，而是统一锚点：常用vertical-align: top、bottom或middle，或直接设vertical-align: -4px这类魔法值（不推荐）
真正稳定的写法是：显式指定对齐方式，并检查父容器是否意外引入了非零 line-height 或 font-size（它们会撑高行框，间接影响 middle 的位置）。
