line-height == height 无法居中是因五项前提未满足：height需为明确数值；内容强制单行（white-space: nowrap）；box-sizing: border-box且padding/border计入高度；禁用vertical-align；父容器不能是flex/grid布局。
line-height == height 还偏移？先确认这五条硬条件
line-height 和 height 数值相等却没居中，不是写错了，而是渲染前提没满足。它只在特定条件下可靠，缺一不可：
-
height必须是明确数值（不能是auto或由内容撑开） - 内容必须强制单行：
white-space: nowrap，否则换行后每行都按该line-height撑高 - 盒模型得干净：
box-sizing: border-box，且padding和border要计入高度计算——若按钮设了height: 40px; padding: 8px;，那真正内容区高是24px，line-height就该设24px，不是40px - 按钮内不能混用
vertical-align（哪怕只加在子span上），它会干扰基线对齐 - 父容器不能是
display: flex或display: grid，这两种布局下line-height对垂直对齐完全无效
安卓 WebView / 旧版 Safari 下 line-height 偏上怎么办
这不是 bug，是字体度量在不同引擎里渲染差异导致的：文字实际绘制区域（ascent/descent）和 CSS 行框（line box）不重合。尤其在 Android Chrome 60–70、iOS Safari 9–12 中高频出现。
临时验证方式：font-feature-settings: "ss02" 0, "cv05" 0 关掉字体变体，看是否回归；但更推荐绕过问题：
- 直接改用
display: flex; align-items: center; justify-content: center;—— 它不依赖字体基线，也不吃渲染引擎差异的亏 - 若必须兼容 IE11，可 fallback 到
display: table-cell; vertical-align: middle;，但要加box-sizing: border-box和显式width/height - 避免用
transform: translateY(-1px)微调——缩放或高 DPI 屏幕下偏移失准，还影响屏幕阅读器定位
按钮里混了 SVG 图标，line-height 突然失效
SVG 默认是 display: inline，和文字一起按 baseline 对齐。它的基线位置和文字不同，整行会被“拉高”，导致文字视觉上偏下。
解决方法不是调 line-height，而是统一对其行为：
- 给图标加
vertical-align: middle（仅限 inline 场景，且需确保父容器没设line-height冲突） - 更推荐：把整个按钮设为
display: flex，图标和文字都变成 flex item，align-items: center自动对齐中心轴 - 别在 flex 容器里再写
line-height—— 二者共存时文字会随字号缩放上下跳动 - 如果图标用了 icon font，检查是否启用了
font-feature-settings，某些变体会抬高 x-height 区域，让小写字母看起来“浮起来”
响应式按钮中 font-size 用 clamp()，line-height 怎么同步
font-size: clamp(1rem, 2.5vw, 1.25rem) 动态变化时，固定 px 的 line-height 会迅速失配。无单位值（如 line-height: 1.5）虽能比例缩放，但无法保证与容器 height 严格一致。
此时 line-height 已不是解法，而是问题源头：
- 放弃
line-height控制高度，用min-height或aspect-ratio（支持环境下）约束按钮尺寸 - 文字垂直居中一律交由
display: flex处理，align-items: center不依赖任何字号或高度值 - 若需像素级控制图标与文字间距，用
gap替代margin，它在 flex/grid 中稳定可靠
真正卡住人的，往往不是怎么写，而是什么时候该停手——当按钮开始嵌图标、响应式缩放、或要跑在微信内置浏览器里，line-height 就该让位了。它不是废了，是适用边界比想象中窄得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
