应使用 display: flex + align-items: center 实现可靠垂直居中，因 vertical-align 依赖行框和字体渲染，在自适应场景下易偏移且不生效；flex 布局通过容器统一控制对齐，规避字体、图标 baseline 等不确定性。
直接用 display: flex + align-items: center，别调 vertical-align —— 它在现代布局里既不可靠又难调准。
为什么 vertical-align 在自适应场景下基本失效
vertical-align: middle 看似简单，但它对齐的是“行框 x-height 中线”，不是容器中点。一旦 font-size 变、line-height 波动、Web Font 加载延迟、或不同图标来源（SVG / 字体图标）baseline 不一致，对齐就会偏移 1–2px，且无法预测。
- 图标包在
<div>里却没设display: inline-block？vertical-align直接被忽略 - 用了
<i class="icon"></i>，但 Bootstrap Icons 默认带vertical-align: -0.125em，会覆盖你的设置 - 父容器是
display: flex，子元素再写vertical-align完全不生效（flex 子项不参与行内格式化上下文） - 小屏缩放或系统字体设置变化时，
vertical-align: middle表现可能在 Chrome 和 Safari 间不一致
flex 布局怎么写才真正可靠
核心是让图标和文字成为同一级 flex 项目，由容器统一控制对齐逻辑，不依赖字体渲染细节。
- 父容器设
display: flex和align-items: center，保证垂直居中 - 用
gap控制图标与文字间距，比margin-right更干净、不会影响最后一项 - 文字和图标都保持原生语义：直接用
<img>、<svg>或<i>，不要额外套<span>或<div> - 若文字可能换行（比如多行说明），加
white-space: nowrap防止破坏单行对齐；否则保留默认换行行为 - 响应式时，可对容器加
flex-wrap: wrap，并在小屏下用媒体查询调整gap和font-size
字体图标（如 Material Icons）的特殊处理
这类图标本质是文本，font-size 必须和相邻文字一致，否则视觉上仍会偏高/偏低 —— 即使 align-items: center 已生效。
立即学习“前端免费学习笔记（深入）”；
- 检查图标元素的计算
font-size，不是看类名，而是 DevTools 的 Computed 面板 - 如果图标库自带样式（如
.material-icons { font-size: 24px; }），而你文字是1.25rem，就得显式重置：.material-icons { font-size: 1.25rem; } - 避免混用不同字号的图标在同一行，否则
gap和对齐都会失衡
最易被忽略的一点：flex 容器本身必须有明确的盒模型行为 —— 如果父级用了 float 或 display: block 且未清除，display: flex 可能被意外覆盖；调试时可临时加 display: flex !important 验证是否生效。
