vertical-align: middle对齐的是父元素行框的x-height中线，而非容器中心；它受font-size、line-height及字体ascender/descender影响，中文、SVG或跨浏览器渲染差异会导致视觉偏移。
vertical-align: middle 对齐的是什么，不是你想的“容器中心”
它对齐的是父元素行框（line box）中 x-height 的中线，约在小写字母 x 高度的一半位置。这个位置由 font-size、line-height、当前字体的 ascender/descender 共同决定，并非固定像素值。中文字符方正、SVG 图标 viewBox 原点不统一、甚至同一字体在 Chrome 和 Safari 渲染 baseline 有 1–2px 差异——这些都会让 vertical-align: middle 看起来“偏了”。
哪些情况下 vertical-align: middle 根本不生效
它只对参与行内格式化上下文的元素起作用，以下情况写上也白写：
-
display是block、flex、grid的元素（比如div包着图标） - 父容器是
display: flex，子项设vertical-align完全被忽略 - 图标用
img标签但被p或div包裹，脱离了行内流 - 字体图标（如
<i class="icon"></i>）自带内联vertical-align: -0.125em，覆盖你的设置
为什么 text-bottom 比 middle 更可靠
vertical-align: text-bottom 把元素底边直接对齐到父元素 font-size 所定义的 em-box 底边，不依赖 line-height、x-height 或兄弟元素基线。只要父级有明确 font-size，结果就稳定。
- 适用所有
inline或inline-block替换元素：SVG、img、input[type="button"] - 不用改
line-height，也不用设font-size: 0这类副作用操作 - 响应式场景下（
rem/vw缩放字号）依然一致 - 示例：
img { vertical-align: text-bottom; }—— 解决 80% 图文错位
真正该用 flex 的时候别硬扛 vertical-align
当出现以下任一情况，display: flex; align-items: center; 是更干净、可维护的选择：
立即学习“前端免费学习笔记（深入）”；
- 图标和文字字号明显不同（如
text-xs+h-5） - 需要支持多行文字+单个图标组合
- 图标来源混杂（inline SVG +
img+ 字体图标） - 父容器用了
truncate或line-clamp，inline-block 换行逻辑会破坏对齐
现代浏览器（Chrome 80+、Firefox 70+、Safari 12.1+）已全面支持，flex 不再是“高级技巧”，而是解决对齐问题的默认路径。最难的从来不是调一个值，而是在混合图标类型、动态字号、多端渲染下保持视觉一致性——这时候靠 vertical-align 硬调，不如从布局层切断变量。
