vertical-align: middle 在移动端常失效，因其仅对 inline 和 table-cell 元素有效，而 flex/grid 容器中完全无效；iOS Safari 对 baseline 计算更严格，且实际对齐的是 content area 中点而非视觉中心。
vertical-align: middle 为什么在移动端经常失效
因为 vertical-align 只对 inline 元素和 table-cell 元素生效，而很多图标（比如用 <i></i> 或 SVG）默认是 inline，但父容器若用了 display: flex 或 display: grid，vertical-align 就完全不起作用——这是最常被忽略的前提。
另外，移动端字体渲染差异大，特别是 iOS Safari 对 baseline 的计算更严格，vertical-align: middle 实际对齐的是“父元素 content area 的中点”，不是视觉中心，所以图标常偏高或偏低。
用 inline-block + vertical-align 实现稳定对齐
确保图标和文字都在同一行内、且都设为 inline-block，才能让 vertical-align 生效：
<span class="icon-text"> <i class="icon"></i> <span class="text">设置</span> </span>
.icon, .text { display: inline-block; vertical-align: middle; }
立即学习“前端免费学习笔记（深入）”；
-
.icon需显式设置宽高（如width: 16px; height: 16px;），否则可能因内容为空导致基线计算异常 -
.text建议加line-height: 1.2或与图标高度一致，避免行高拉伸干扰对齐 - 父容器
.icon-text不要设font-size: 0（除非你清楚它会吃掉 inline 元素间的空白，且后续需重置子元素字号）
更推荐的现代方案：flex 替代 vertical-align
在移动端，display: flex 是更可控、兼容性足够（iOS 9+ / Android 4.4+）的选择，且不依赖 baseline 计算：
.icon-text { display: flex; align-items: center; gap: 4px; }
-
align-items: center真正按容器交叉轴居中，无视字体大小或图标渲染差异 -
gap替代 margin 控制间距，避免外边距合并问题 - 如果图标是 SVG，记得加
vertical-align: top或display: block，防止底部多出空白（SVG 默认 inline，会留 baseline 空隙）
遇到 SVG 图标偏移时的紧急修复
SVG 作为 inline 元素时，底部常有约 4px 空白，即使设了 vertical-align: middle 也难对齐。直接加这行就能解决：
svg { vertical-align: -0.125em; }
-
-0.125em是经验数值，适配多数 16px 字号场景；若文字变大，可微调为-0.15em - 比
vertical-align: top更柔和，不会让图标突然上跳一截 - 不要用
margin-bottom: -4px这类绝对值，不同设备像素比下容易错位
line-height 和父容器 font-size 三者的组合。别只盯着 vertical-align 调，先确认 display 类型和 SVG 渲染行为。 
