line-height等于height不能解决大多数真实场景下的按钮文字垂直居中问题，因其依赖单行纯文本、box-sizing:border-box、无padding/border干扰、无图标混排及非flex容器等严苛条件，一旦违背即失效；真正可靠的是display:flex+align-items:center，但须清除line-height、vertical-align等干扰并确保子元素为inline或重置display。
直接说结论：line-height 等于 height 不能解决大多数真实场景下的按钮文字垂直居中问题，尤其当按钮有 padding、含图标、用自定义字体或嵌套在 flex 容器里时——它只是个“看起来能用”的幻觉。
为什么 line-height: 40px + height: 40px 还是偏上？
这不是你写错了数值，而是浏览器根本没按你想的那样渲染：
-
height: 40px是整个元素高度，但line-height只作用于「内容区」——如果按钮有padding: 8px，内容区实际只有40px - 16px = 24px，那line-height就该设成24px，不是40px - 按钮默认是
display: inline或inline-block，line-height在这种上下文中受vertical-align干扰；哪怕没显式写，也可能继承父级的vertical-align: baseline - 用了
font-family: "Inter", system-ui这类现代字体时，其 ascent/descent 值比传统字体高，基线位置上移，文字视觉上就“浮起来”了 - 父容器用了
display: flex或display: grid，line-height直接被align-items覆盖，完全不生效
padding 对齐法为什么总差 1–2px？
靠 padding-top 和 padding-bottom 手动调参，本质是在“猜”字体度量——而不同字号、不同字体、不同系统（macOS vs Windows）下，同一 font-size 的实际字形高度和基线位置都不一样。
- 比如
font-size: 16px在 macOS 上用 SF Pro，ascender 高约 13.5px；Windows 上用微软雅黑，可能只有 12.2px——你写的padding: 12px 0在一台机器上刚好，在另一台就偏了 - 加了
border但没设box-sizing: border-box，padding会额外撑开容器，导致内容区变窄，进一步放大误差 - 按钮里混了
<svg></svg>或<img>，它们默认按baseline对齐，把整行“顶高”，纯文本跟着上浮
真正靠谱的解法：用 flex，但必须关掉干扰项
别只写 display: flex; align-items: center 就完事。以下四条缺一不可：
- 按钮本身设
display: flex，且子元素（文字或span）**不能是块级元素**——比如<h1></h1>要么改成<span></span>，要么重置display: inline - 移除子元素上的
height、line-height、vertical-align，这些会和flex冲突 - 确保
box-sizing: border-box已全局或局部启用，否则padding和border会破坏flex的计算逻辑 - 如果按钮内含图标，统一用
display: inline-flex包裹图标+文字，并给两者都设align-items: center，避免基线错位
什么时候还能用 line-height？
仅限极简单行按钮，且满足全部五项硬条件：
- 容器
height明确（非auto） - 内容纯文本、无换行（加
white-space: nowrap） -
box-sizing: border-box+ 显式清空padding和border - 子元素是纯
inline（不用span也行，但绝不能是div或h1） -
line-height值等于「内容区高度」，即height - padding-top - padding-bottom - border-top-width - border-bottom-width
现实中，只要按钮带图标、支持多语言（中文/英文混排）、或用 rem/em 动态字号，这条路径基本就废了——flex 不是“更高级的替代方案”，它是唯一经得起真实业务考验的解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
