display: flex + align-items: center 是移动端文字与图标垂直居中的唯一可靠方案；vertical-align: middle 因依赖不稳定的 font-size 0.5ex 基准，受字体、换行、系统缩放等影响，在 ios safari 等环境下必然偏移 1–3px，无法通过调参解决。
移动端文字与图标垂直居中，display: flex + align-items: center 是唯一可靠方案；其他方式（如 vertical-align: middle、line-height）在 iOS Safari 或小字号下必然偏移 1–3px，不是调参能解决的。
为什么 vertical-align: middle 在移动端完全不可信
它对齐的是父元素 font-size 的 0.5ex 位置，而非视觉中心。同一段 CSS 在 iPhone 上用 SF Pro 显示偏高，在安卓用 Roboto 就下沉，换行后直接失效。更麻烦的是：SVG 图标没设 viewBox、字体图标加载延迟、甚至系统缩放开关开启，都会让 baseline 漂移——这不是 bug，是规范行为。
display: inline-flex 必须加在哪个容器上
必须加在图标和文字的**直接父容器**，且该容器内不能混入其他语义无关元素（比如额外的 <span></span> 包裹文字、或未清除的浮动子项）。常见错误包括：
- 给
.nav-item设了position: relative，结果子元素的inline-flex被 transform 干扰 - 父容器有
overflow: hidden，而图标宽度略超导致被裁剪，看起来像“居中失败” - 用了
gap: 8px，但 iOS Safari 缩放后 gap 微浮点，建议改用gap: 0.5em
移动端 Flex 垂直居中失效的三个硬性前提
不是代码写错，而是渲染条件不满足：
- 父容器高度为
auto且无内容撑开 → 加min-height: 44px（iOS 触控最小尺寸）或height: 100dvh - 图标用了
height: 100%，但父容器高度未定义 → 百分比退化为 0，只剩文字“悬空” - 文字用了
line-height: 1，而 SVG 没设viewBox="0 0 24 24"→ 渲染尺寸异常，Flex 容器按错误尺寸算中点
真正容易被忽略的是：移动端没有“默认安全高度”。哪怕只写 align-items: center，也得确认父容器是否真有可计算的交叉轴尺寸——否则 Flex 居中只是个语法正确但视觉无效的声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
