按钮文字垂直“偏下”是因vertical-align对块级按钮无效，文字按字体基线对齐导致视觉下沉；推荐用flex布局（display: flex; align-items: center）实现稳定居中。
按钮文字垂直对齐为什么总“偏下”
因为 vertical-align 对块级按钮无效，而默认的行内渲染行为会让文字按字体基线（baseline）对齐——小写字母如 x、a 的底部刚好落在基线上，但大写字母和符号（如 +、×）视觉中心却高于它，结果就是文字看起来整体下沉。这不是 bug，是字体度量本身决定的。
常见错误是给按钮加 vertical-align: middle，但它只对 inline 或 inline-block 元素起作用；若按钮是 display: block（比如带 padding 的 button），这行 CSS 完全被忽略。
用 flex 实现稳定居中（推荐首选）
最直接有效的方式是把按钮设为 flex 容器，靠 align-items 控制子内容垂直位置：
.btn {
display: flex;
align-items: center;
justify-content: center;
height: 48px;
padding: 0 16px;
}
- 适用于单行或多行文字，不依赖
line-height或字体大小 - 如果按钮里只有纯文本（无图标、无 span 嵌套），可直接写在
button上 - 注意：若内部有
span或svg，它们会成为 flex 项目，需统一处理margin或gap - 旧版 iOS Safari（flex 在
button内的支持略弱，可加display: -webkit-inline-flex回退
line-height 方案的适用边界与风险
仅当按钮高度固定、且文字确定为单行时，line-height 才可靠：
.btn {
height: 48px;
line-height: 48px; /* 必须与 height 严格相等 */
padding: 0 16px;
font-size: 16px;
}
- 一旦文字换行（比如响应式断点触发），
line-height失效，文字会溢出或挤压 -
line-height值受字体 ascender/descender 影响，同一数值在不同字体下视觉位置不同 - 不要混用
line-height和padding来“凑高度”，容易在高 DPI 屏幕上出现 1px 偏移
SVG 图标 + 文字组合时的 baseline 干扰
如果按钮里同时有 SVG 和文字，vertical-align 的取值会直接影响整体对齐效果，尤其在 Safari 中表现不稳定：
<button class="btn"> <svg viewbox="0 0 24 24" width="16" height="16">...</svg><span>保存</span> </button>
- 默认情况下，
svg是inline元素，其vertical-align默认为baseline，但 SVG 的viewBox原点位置不统一，导致底边对不齐文字底边 - 统一设
vertical-align: text-bottom比middle更可控，能强制 SVG 底边贴合文字底边 - 避免在同一按钮中混用不同
font-size的文字和图标，否则em单位偏移（如-0.125em）会失效
真正难调的不是“怎么居中”，而是“为什么换了字体/尺寸/浏览器就偏了”——根源不在 CSS 写错，而在字体度量和渲染上下文不可控。优先选 flex，慎用 line-height，遇到 SVG 就锁死 vertical-align: text-bottom。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
