最直接解法是用display: flex+align-items: center，因图标与文字默认按基线对齐导致视觉偏移；需确保图标为inline-block、显式设置svg宽高及viewbox，并避免使用vertical-align。
按钮内图标和文字“看起来没对齐”，不是图标本身歪了，而是默认基线对齐（baseline）在捣鬼。用 display: flex + align-items: center 是最直接、最可控的解法。
按钮内部图标与文字垂直居中对齐
这是最常见的对齐需求：按钮里一个 <svg></svg> 或 <i></i> 加一段文字，但文字总像“浮”在图标上方。根本原因是行内元素默认按基线对齐，而图标（尤其 SVG）的坐标系原点和字体度量不一致。
- 给按钮（
button或a）加display: flex和align-items: center，强制子元素按容器交叉轴中心对齐 - 确保图标是块级或内联块级：
<svg></svg>需设display: inline-block；<i class="icon"></i>也要加display: inline-block - 避免对图标单独设
vertical-align—— Flex 下它无效，还可能掩盖真实问题 - SVG 必须显式声明
width和height（如16px），且推荐viewBox="0 0 16 16"，否则渲染位置会漂移
按钮整体在父容器中水平居中
按钮本身要居中，不是调图标，而是控制按钮这个元素在页面中的位置。Flex 布局在这里依然最省心，且天然响应式。
- 把按钮的直接父容器设为
display: flex，再加justify-content: center - 不需要给按钮设固定宽度，
justify-content: center对任意宽度的子元素都生效 - 如果父容器高度不确定，又需要垂直居中，就再加上
align-items: center - 注意父容器要有明确的宽度上下文（比如
width: 100%或max-width），否则justify-content可能表现异常
IE11 兼容场景下图标错位怎么办
Flex 布局本身 IE11 支持良好，但 gap 属性完全不支持，且旧版 Edge 对 flex-shrink 处理不稳定，容易导致图标被压缩或换行。
- 去掉所有
gap，改用图标元素加margin-right: 4px（或margin-inline-end: 4px）控制间距 - 给图标加
flex: 0 0 auto（即flex-grow: 0; flex-shrink: 0; flex-basis: auto），防止被挤压变形 - 检查按钮是否意外继承了
min-width或white-space: nowrap，这些在 IE 中容易引发换行
真正麻烦的不是写几行 CSS，而是当图标偏移时，第一反应去调 vertical-align 或 margin-top —— 这些都是治标。先确认图标是不是块级、viewBox 是否规范、父容器有没有被其他 flex 属性干扰，比盲目加样式更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
