line-height等于height仅对单行纯文本可靠，因它依赖行框撑满与基线对齐；一旦换行、含图标、字体差异或盒模型未设border-box，即失效，此时应改用flex布局。
line-height 与 height 等高是单行按钮文字垂直居中的最快方案，但仅在严格满足条件时可靠——一旦按钮内容换行、含图标、或用了非系统字体，就会失效。
为什么line-height == height有时不生效
这不是 bug，而是 CSS 行盒（line box）渲染机制决定的：line-height 控制的是行框高度，不是文字本身的视觉中心。当按钮有 padding 或 border，而你又没设 box-sizing: border-box，那实际内容区高度就小于 height，line-height 就撑不到预期位置。
- 检查是否漏写了
display: block或display: inline-block——line-height对display: inline的 button 默认行为不稳定 - 确认没有其他样式覆盖了
line-height，比如从父级继承的font-size改变导致计算偏差 - 若按钮用了自定义字体（如 Inter、SF Pro），其
ascent/descent值可能拉高基线，让文字看起来“偏上”，此时等高只是表面正确
flex 居中比 line-height 更鲁棒的三个理由
当你发现 line-height 在真机或不同字号下反复偏移，直接切到 display: flex 是更省时间的选择。
-
align-items: center作用于文本的匿名 flex item，不受字体基线干扰 - 支持多行文字、图标、
svg、甚至img混合排版，无需额外微调 - 配合
gap可控图标与文字间距，vertical-align完全不用出现
注意：别在已用 flex 的按钮里再写 line-height，二者冲突会导致文字上下跳动。
小写字母（如 x）在按钮里总偏下的真实原因
不是你的 CSS 写错了，是字体度量本身让小写字母的视觉重心偏低。系统字体（如 system-ui）和 WebFont（如 Inter）默认启用 font-feature-settings: "ss02" 等变体，会抬高 x-height 区域，反而加剧错觉。
立即学习“前端免费学习笔记（深入）”；
- 临时验证：加
font-feature-settings: "ss02" 0, "cv05" 0看是否回归正常 - 更稳妥做法：用大写字母（如
X）或符号（如×）替代小写x，尤其在关闭按钮中 - 绝对不推荐用
transform: translateY(-1px)补偿——缩放时偏移失准，且破坏可访问性
line-height 是妥协起点，flex 是交付底线，而字体特性调试，往往才是最后卡住的那 1px。 
