应改用 display: flex + justify-content: center + align-items: center 实现垂直居中，因 line-height 依赖字体度量，android 和 ios 解析中文字体 ascent/descent 不一致，导致真机偏上 2–4px，且在按钮、多行文本、webview 等场景下失效。
移动端用 line-height 实现文字垂直居中，真机上大概率偏上 2–4px，这不是你写错了，是 Android 和 iOS 对中文字体度量（ascent/descent）的解析逻辑不一致导致的底层行为。别调 line-height 数值了，直接换方案。
为什么 line-height: 44px + height: 44px 在真机上还是偏上
因为 line-height 居中依赖字体自身的度量基准线，而 Android WebView 常按英文 sans-serif 的 ascent 算行高，实际渲染中文时 ascent 更高，文字就“浮”起来了。iOS Safari 还会偷偷给 <button></button> 加 vertical-align: baseline，进一步破坏对齐。
-
line-height在display: flex或display: grid容器里完全失效 - 哪怕单位换成
rem或em，只要用了line-height，偏差就还在 - 按钮内容一旦变成两行（比如“加载失败，请重试”），
line-height直接贴顶 - 安卓低端机、WebView 内嵌页、PWA 场景下问题更明显
用 display: flex 替代 line-height 的硬性条件
不是写了 display: flex 就自动居中，必须同时满足这几条，否则照样无效：
- 父容器必须有明确高度约束：
height、min-height，或被上下文撑开（不能是height: auto） - 清除所有干扰：显式设
line-height: normal，避免继承来的行高 -
<button></button>元素要额外覆盖 UA 样式：vertical-align: middle - 设
box-sizing: border-box，防止padding/border撑出容器 - 必须写全：
display: flex+justify-content: center+align-items: center
什么时候该立刻放弃 line-height 改用 flex
遇到以下任意一种情况，line-height 就不再是“够用”，而是“埋雷”：
- 按钮含图标 + 文字混合（
<svg></svg>或<img>） - 响应式中按钮宽度会变窄，文字可能换行
- 用了 CSS 变量控制字号（如
font-size: clamp(1rem, 2.5vw, 1.25rem)） - 按钮是
position: absolute，或嵌在flex/grid容器里 - 需要兼容 Safari 9.1 以下或旧版 Android WebView
最易被忽略的兼容性细节
<button></button> 是特殊元素，iOS 15+ 会注入隐式内边距和基线对齐；Android 7.0+ 才支持通过 + font-family: -apple-system, system-ui 强制中文字体 fallback。但这些都绕不开 UA 样式污染——所以最稳的解法，永远是先清样式再上 flex，而不是在 line-height 上反复微调像素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
