vertical-align: middle在多行文字中必然失效，因其仅作用于单行内联元素，对齐基准是行框基线而非文本块视觉中心；SVG基点、字体x-height及浏览器差异更致Chrome与Safari偏差1–2px，多行时完全不生效。
直接用 display: flex + align-items: center，但必须确保 SVG 和文字容器是同一 Flex 容器的直系子元素——否则再调也没用。
为什么 vertical-align: middle 在多行文字里必然失效
它只对单行内联元素起作用，对齐基准是“行框基线”，不是文本块的视觉中心。SVG 的 viewBox 原点、字体的 x-height、甚至浏览器渲染引擎差异，都会让 vertical-align: middle 在 Chrome 和 Safari 里差 1–2px；多行时更彻底失效——Flex 容器按整个文本块高度算中点，vertical-align 根本不参与这个计算。
常见错误现象：
-
vertical-align: middle写在<svg>上，但父容器没设display: inline-block或line-height，属性被忽略 - 文字包裹在
<h2>里，图标却放在外面，结构断裂，Flex 无法识别“图文整体” - 用了 Web Font，字体加载中 fallback 字体导致基线跳变，
vertical-align值瞬间失准
display: flex 必须加在哪一层容器上
必须加在图标的**直接父容器**，且该容器只包含图标和文字块（比如一个 <div class="text-block">），不能是外层卡片、导航栏或带 position: relative 的 wrapper。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 把多行文字显式包进一个
<div>或<span>，确保它是 Flex 容器的直系子项 - SVG 也作为同级子项，不要嵌套在文字容器内部
- 临时加
border: 1px solid red验证容器是否“包得住”两个子元素，避免被overflow: hidden裁剪 - 若需保持行内流行为（比如按钮内嵌图文），改用
display: inline-flex，而非blockflex
align-items: center 生效的三个前提条件
这个声明本身没问题，但 Flex 轴心计算依赖结构完整性：
- 图标必须脱离 baseline 干扰：SVG 加
display: block或inline-block，别留默认display: inline - 文字容器不能设
line-height过大，否则撑高容器导致视觉居中偏移；建议用line-height: 1.4或继承父级 - 如果图标用了
height: 100%，父容器必须有明确高度（如min-height: 40px），否则百分比退化为 0 - IE11 不支持
gap，若需兼容，用margin-inline-end: 0.75rem替代
最易被忽略的一点：多行文字的“高度中点”会随断行位置动态变化，align-items: center 是唯一能响应式跟踪这个中点的方式；任何基于固定 margin-top 或 transform: translateY 的方案，在响应式断行后都会立刻错位。
