line-height == height 仍不居中，需严格满足五项硬条件：height为明确像素值、white-space: nowrap强制单行、box-sizing: border-box、line-height等于内容区高度（非总高）、无vertical-align干扰；含svg/img时应改用flex布局。
line-height == height 仍不居中，先查这五项硬条件
这不是字体大小的问题，而是 line-height 居中机制本身有严格前提。只要漏掉任意一条，视觉上就会偏上或偏下：
-
height必须是明确像素值（如height: 40px），不能是auto、min-content或由内容撑开 - 内容必须强制单行：
white-space: nowrap不可省；换行后 line-height 只控制行间距，不控制整体垂直位置 -
box-sizing必须为border-box；否则padding和border会挤占内容区，导致实际文字区高度 ≠height -
line-height值必须等于「内容区高度」，即height - padding-top - padding-bottom - border-top-width - border-bottom-width，不是总高 - 不能有
vertical-align干扰：按钮自身或子元素（如<svg></svg>、<img>）设了vertical-align，会强制按基线对齐，覆盖 line-height 行框居中逻辑
按钮含 SVG/IMG 时 line-height 一定失效
图标是替换元素，默认按 baseline 对齐，而文字的 baseline 位置受字体 ascent/descent 影响，二者天然不同步。此时 line-height 只作用于文本行框，对图标无效，整行视觉重心被拉偏。
别试 vertical-align: middle + 微调 line-height —— 换个字体、换个图标尺寸、甚至 iOS 和 Android 渲染差异，都会让偏移量变。
可靠解法只有一种：display: flex：
.btn {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 0 16px;
box-sizing: border-box;
}
它绕过字体度量、无视换行、不依赖 baseline，图标和文字作为匿名 flex item 一起居中。
Flex 容器里写 line-height 是白忙活
如果按钮父级是 display: flex 或 display: grid，子元素的 line-height 在垂直方向上完全不生效 —— 因为 align-items: stretch（flex 默认值）会把按钮拉满父容器高度，掩盖了行框行为。
更隐蔽的问题是：你可能在按钮上同时写了 display: flex 和 line-height。这两者冲突，会导致文字在某些缩放比例或字体加载状态下上下跳动。
正确做法：一旦用了 flex，立刻把 line-height 设为 normal 或直接删掉。垂直对齐只交给 align-items: center 管理。
移动端 Android 上偏移 1–2px 的真实原因
不是 bug，是字体渲染引擎对小字号（≤14px）的行框处理策略不同。Android WebView 和旧版 Chrome 会将 line-height 解析为“最小行高”，而非精确行高，尤其当 font-size 远小于 line-height 时（比如 font-size: 12px; line-height: 40px），基线位置浮动加剧。
用 transform: scale() 放大再缩小是权宜之计，但会破坏可访问性（缩放后文字模糊、屏幕阅读器识别异常）。
真正稳的方案只有两个：
① 改用 padding 控制高度（如 padding: 12px 16px，去掉 height 和 line-height）；
② 强制 display: flex，它在所有现代 Android 浏览器中行为一致。
最容易被忽略的是：即使你没显式写 display: flex，某些 CSS 框架（如 Tailwind 的 flex 工具类、Ant Design 按钮默认样式）已悄悄启用了它 —— 此时还在调 line-height，纯属对着空气调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
