最稳方案是按钮设 display: flex 和 align-items: center，图标与文字同级且尺寸一致，用 gap 控制间距；需显式设 min-height、统一 svg viewbox，并避免 vertical-align 在 flex 中误用。
button 里用 flex 实现图标+文字垂直居中
直接给按钮加 display: flex 和 align-items: center，图标和文字就自动对齐了，不用调 vertical-align 或手动算 margin。这是目前最稳的方案，IE10+ 都支持（加个 -ms-flex-align: center 前缀可兼容旧版 IE）。
常见错误现象：<button><svg></svg>提交</button> 里图标飘上面、文字沉底——不是图标尺寸不对，是默认 vertical-align: baseline 在捣鬼。
- 必须确保图标和文字都在同一级 DOM 下，不要额外套
<div>，否则会多一层布局干扰 <li>如果图标是字体图标（如 <code><i class="icon-save"></i>），要统一它的font-size和文字一致，否则视觉上仍会偏移 - 用
gap: 8px控制间距，比给图标加margin-right更干净，不会影响对齐逻辑 - 只对
display: inline、inline-block、inline-table或table-cell元素生效，div包裹图标后没改display就完全无效 - 别在 flex 容器里给子项设
vertical-align——flex 子项不参与行内格式化上下文，该属性被忽略 - 更可控的替代值：
vertical-align: text-bottom（图标底边对齐文字底边），或用em单位微调，比如vertical-align: -0.125em - 按钮默认是
display: inline-block，高度由行高和内边距决定；建议显式设min-height: 36px或height: 36px（按设计规范） - 如果按钮内容动态变化（比如加载中状态替换文字），需确保所有状态下的内容高度相近，否则
align-items: center会随容器高度浮动 - 避免同时用
line-height控制按钮高度——它和 flex 的align-items可能冲突，优先靠 height + padding 构建基础尺寸 - 导出 SVG 时统一设
viewBox="0 0 24 24"（或其他固定值），并确保图形内容从 (0,0) 开始绘制 - 用工具批量标准化：可用
svgo配置removeViewBox: false+addAttributesToSVGElement: { viewBox: "0 0 24 24" } - 临时调试法：给 SVG 加
border: 1px solid red，观察其实际渲染边界是否对齐文字 baseline
inline 元素用 vertical-align 对齐时为什么总不准
vertical-align: middle 看似简单，但实际对齐的是“行框 x-height 中线”，不是容器中心，受 font-size、line-height、字体 ascender/descender 影响极大。Chrome 和 Safari 渲染结果常差 1–2px，换字号后原来调好的值立刻失效。
常见错误现象：单独写 img { vertical-align: middle; }，图片底部仍有空白；或文字和 SVG 图标明显错位。
图文混排时父容器高度缺失导致 align-items 失效
用 flex 实现垂直居中时，align-items: center 要依赖父容器有明确高度。如果按钮本身没设 height 或 min-height，且内部内容撑不开容器，垂直居中就会“看起来没反应”。
常见错误现象：按钮加了 display: flex; align-items: center;，但图标和文字还是上下错位，尤其在小字号或紧凑 padding 下。
SVG 图标 viewBox 不统一引发的对齐偏移
不同来源的 SVG 图标，viewBox 原点和坐标范围不一致，会导致即使尺寸相同，渲染基线也不同。比如一个图标 viewBox="0 0 24 24"，另一个是 viewBox="-2 -2 28 28"，在 flex 容器里也会轻微错位。
常见错误现象：同一组按钮里，部分图标略高、部分略低，检查 CSS 完全一致，问题出在 SVG 源文件。
真正麻烦的不是写几行 CSS，而是 SVG 源文件不规范、字体图标和 raster 图混用、或 flex 容器高度靠内容撑开却没兜底——这些细节不处理，光调 gap 或 vertical-align 都是白忙。
