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 是更省时间的选择。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 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) 补偿——缩放时偏移失准，且破坏可访问性

真正难处理的，是那些既要兼容 IE11、又得在 iOS Safari 上显示一致、还嵌了 iconfont 的按钮。这时候，line-height 是妥协起点，flex 是交付底线，而字体特性调试，往往才是最后卡住的那 1px。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！