display: flex + align-items: center 能可靠垂直居中，因它在Flex容器上下文中按交叉轴精确计算中点；而vertical-align: middle仅适用于行内/表格元素，对齐基准是不稳定的字体基线，受font-family、字号、浏览器差异影响，且多行失效。
直接用 display: flex + align-items: center 就能解决，其他方案要么失效、要么难维护。
为什么 vertical-align: middle 总是不准
它只对行内元素或表格单元格生效，且对齐基准是“行框基线”，而图标字体（如 Material Symbols）、<img> 或 <svg> 的基线位置不统一。同一段 CSS 在不同字号、不同浏览器里表现可能差 2–3px —— 不是 bug，是 spec 规定的行为。
-
vertical-align: middle实际对齐的是父元素 font-size 的 0.5ex 位置，不是视觉中心 - 换一个
font-family，图标就突然偏高或下沉 - 多行文本时完全失效：它只管单行的基线，不管整个文本块的高度中点
display: flex 必须加在哪个容器上
必须加在图标的直接父容器，且该容器只包含图标和文字（或最多加个分隔符），不能是大段内容的 wrapper。
- 错误写法：
<div class="card"><div class="icon-text"><i></i>Text</div></div>，但.card已设float或position: relative，导致.icon-text的flex被继承样式干扰 - 正确写法：确保
.icon-text的display: flex生效，可用border: 1px solid red临时验证容器是否“包得住”子元素 - 如果父容器有
overflow: hidden，flex 子项可能被意外裁剪——这不是居中问题，是布局溢出
align-items: center 失效的三个常见原因
不是属性写错了，而是上下文破坏了 flex 轴心计算逻辑。
立即学习“前端免费学习笔记（深入）”；
- 父容器没设明确高度，且子元素全为
auto高度 → 浏览器按内容撑高，center仍有作用，但视觉看不出效果（可加min-height: 40px验证） - 图标用了
height: 100%但父容器高度未定义 → 百分比失效，图标高度退化为 0，只剩文字“悬空” - 文字用了
line-height: 1但图标是 SVG 且没设viewBox→ 图标实际渲染尺寸异常，flex 容器按错误尺寸计算中点
响应式下图标与文字间距忽大忽小怎么办
iOS Safari 和部分安卓 WebView 对 gap 的解析存在微小浮动，尤其页面缩放后。不要依赖纯 gap 控制间距。
- 优先用
gap: 0.5em而非gap: 8px，让间距随字体缩放 - 若必须固定像素值，给图标加
flex-shrink: 0，防止小屏下被压缩变形 - 避免在 flex 容器上同时设
padding和gap，二者叠加容易超预期（比如 padding-left + gap 导致首图标离边距翻倍）
真正麻烦的从来不是写那两行 CSS，而是排查谁偷偷重写了 display、谁给父级加了 transform 影响了 flex 主轴、或者图标本身 viewBox 缺失导致渲染错位——这些细节不报错，但会让 align-items: center 看起来“失灵”。
