vertical-align 仅对 inline、inline-block、table-cell 元素生效，作用于行内格式化上下文中的基线对齐，非容器级垂直居中工具；设在块级元素上被忽略，对齐基准是 line-height 生成的行内框中线，非父容器中心。
vertical-align 为什么加了也不起作用？
因为它根本不是给“容器”用的垂直居中工具，而是行内格式化上下文（IFC）里调节**行内级元素基线位置**的属性。加在 div、section 这类块级元素上，浏览器直接忽略——不是 bug，是规范如此。
哪些元素能用 vertical-align？
只对三类元素生效：
-
display: inline（如span、em） -
display: inline-block（最常用，比如图片、按钮、图标） -
display: table-cell（需配合display: table的父容器）
常见错误：给 img 加 vertical-align: middle 却没改它的 display ——其实 img 默认就是 inline，所以这步通常不用改；但如果你给它加了 float 或 position: absolute，它就脱离了行内流，vertical-align 立刻失效。
为什么设置了 middle 还是偏上/偏下？
因为 vertical-align 的对齐基准不是父容器高度，而是「行高」（line-height）决定的「行内框」。没有 line-height，就没有对齐空间。
立即学习“前端免费学习笔记（深入）”；
典型场景：文字旁放一张 img，想让它和文字中线对齐，但总卡在底部。原因很可能是父容器（比如 p 或 div）没设 line-height，或设得太小。
.wrapper {
line-height: 2em; /* 关键！提供足够高的行内框 */
}
.wrapper img {
vertical-align: middle; /* 对齐到该行内框的中线 */
}注意：vertical-align: middle 是对齐到**行内框的中点**，不是父容器的中点；若父容器高度远大于行高，视觉上依然不居中。
替代方案比硬拗 vertical-align 更可靠
当你要真正实现「容器内内容垂直居中」，vertical-align 往往不是第一选择。它天生受限于行内流，一旦涉及多行、固定高、弹性内容，就容易失控。
- 单行文本+图标/图片 → 用
line-height+vertical-align足够轻量 - 任意内容居中 → 改用
display: flex+align-items: center - 老项目兼容 IE8–9 → 用
display: table/table-cell套路 - 绝对定位居中 →
top: 50%+transform: translateY(-50%)
别为了“用上 vertical-align”而强行改 display 或塞空格元素——它不是万能对齐开关，只是 IFC 里的一个微调旋钮。真正卡住的时候，换布局模型，往往比调试十种 line-height 更快。
