最可靠解法是将按钮设为flex容器：加display: inline-flex和align-items: center，图标与文字作直接子元素，禁用vertical-align，用gap控制间距，并确保字体图标字号一致。
直接用 vertical-align: middle 基本无效——图标和文字默认按基线对齐，而图标底部留白、字体上升部/下降部不一致，导致视觉上总“飘高”或“下沉”。真正可靠的做法是让按钮本身成为 Flex 容器。
button 里放 SVG 或 img 时怎么垂直居中
别给图标加 vertical-align，也别调 line-height 或 padding 猜高度。把 <button> 设为 flex 容器即可：
- 给
<button>加display: flex和align-items: center - 图标（
<svg>、<img>）和文字都作为直接子元素，无需额外包裹 - 用
gap控制间距，比如gap: 8px，比margin更干净 - 若图标是字体图标（如
<i class="icon">save</i>），确保其font-size与文字一致，否则仍会偏移
为什么 inline-flex 比 flex 更适合按钮场景
display: inline-flex 让按钮保持行内流式行为，不会独占一行，适配导航栏、工具栏等紧凑布局：
- 按钮在父容器中仍可与其他行内元素并排（如文字、其他按钮）
- 不会触发块级格式化上下文（BFC），避免意外的 margin 合并或浮动干扰
- 如果按钮需要撑满父容器宽度，再改用
display: flex并加width: 100% - 注意：IE11 对
inline-flex支持良好，但若子元素有min-height，可能被压缩，需加flex-shrink: 0
小写字母（如 “x”、“g”）在按钮里还是偏下怎么办
这不是对齐问题，而是字体度量本身导致的视觉偏差——即使 flex 居中了，小写字母的 descender（下降部）也会拉低重心：
立即学习“前端免费学习笔记（深入）”；
- 不要调
padding-top或transform: translateY()补偿，这会让不同字符表现不一致 - 优先换用更均衡的字体（如
system-ui、-apple-system），或指定font-feature-settings: "ss01"启用替代字形 - 若必须用特定字体且只显示单字符，可微调
line-height（仅限该按钮），但这是 hack，不是通用解 - 真正可控的方式是用 SVG 图标替代字体图标——SVG 无字体度量干扰，flex 居中后就是物理中心
最易被忽略的一点：按钮内部子元素如果用了 float 或 position: absolute，它们会脱离 flex 流，align-items 就完全失效。检查开发者工具里元素是否还在 flex 项目列表里，而不是“absolutely positioned”。
