最稳方案是直接给button设display: flex和align-items: center，图标和文字自动垂直居中；需确保图标为或、不设vertical-align、用gap控制间距，且避免嵌套干扰。
button里用flex实现图标+文字垂直居中
直接给<button></button>加display: flex和align-items: center，图标和文字自动对齐，不用管vertical-align那一套。这是目前最稳、最不易翻车的方案。
常见错误现象：图标飘在上面、文字沉底、换字号后错位、响应式缩放时偏移
- 确保图标是
<svg></svg>或<img>，不额外设vertical-align - 用
gap控制间距（比如gap: 8px），别用margin-right破坏按钮内边距一致性 - 如果按钮含
<strong></strong>或嵌套标签，检查是否多了一层行内块干扰对齐 - IE10需加
-ms-flex-align: center前缀，但2026年绝大多数项目已可忽略
font-icon（如Bootstrap Icons）怎么调vertical-align
字体图标默认下沉，是因为它按baseline对齐，而文字基线和图标基线不重合。Bootstrap Icons v1.10+内置了vertical-align: -.125em，但只在<i></i>元素上生效，且前提是你没动它的display类型。
使用场景：老项目还在用<i class="bi bi-save"></i>，又不能改结构
- 确保
<i></i>保持默认display: inline，不要加block或flex - 父容器别加
align-items-start这类干扰类——哪怕只是Bootstrap的d-flex也得确认包裹层级是否正确 - 如果用了自定义图标字体，
-.125em可能不准，实测调整为text-bottom或middle更可靠 - 统一设
font-size: 1rem能减少因字号变化带来的偏移波动
为什么align-items: center在flex里还失效？
不是flex不行，而是对齐上下文被破坏了。Flex的align-items只作用于**直接子元素**，中间多一层标签、多一个margin、甚至一行空格，都可能导致视觉错位。
容易踩的坑：
- 写了
class="d-flex align-items-center"，但实际结构是<div class="d-flex"><span><i></i>文字</span></div>——<span></span>才是flex item，图标和文字在它内部，align-items不穿透 - 图标用了
width: 1em但文字font-size是0.875rem，尺寸不匹配导致视觉偏高 - 按钮有
padding，但图标没设height或vertical-align，渲染盒模型高度不一致 - 用了
white-space: nowrap防换行，但文字内容本身含<br>或CSSword-break: break-all，破坏单行假设
line-height方案还能用吗？
仅限单行、固定高度、纯文本按钮，且你明确知道不会换行、不会动态改字号。一旦加图标或支持多语言，立刻崩。
性能/兼容性影响：无性能问题，但维护成本高。每换一次font-size或height就得同步改line-height，响应式断点一多就失控。
- 写法：
height: 40px; line-height: 40px; text-align: center; - 图标必须是行内替换元素（如
<img>），且height设为1em或与文字等高 - 别对
<button></button>直接设line-height——它会和flex冲突，优先级混乱 - 移动端字体加载延迟时，
line-height可能先渲染再跳变，出现闪动
真正麻烦的不是选哪个方案，而是同一套CSS在font-size: 0.875rem和1.25rem下表现不一致。对齐逻辑最好抽成独立类（比如.icon-text-center），并在根CSS里统一重置所有图标字体的vertical-align行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
