line-height = height 在移动真机上不居中，是因iOS 15+和Android 4.4–7.x浏览器底层用英文字体ascent/descent度量渲染中文，导致文字视觉“浮起”2–4px，非代码错误。
line-height = height 在移动真机上不居中，不是你写错了，是浏览器底层字体度量和对齐策略不一致导致的系统级偏差——iOS 15+ 和 Android 4.4–7.x 尤其明显。
为什么 line-height: 44px + height: 44px 在 Safari/Android 上还是偏上
因为 line-height 的垂直居中依赖字体自身的 ascent/descent 度量，而：
- iOS Safari（尤其 15+）默认 fallback 到
-apple-system，按英文字体度量算中文行高，实际中文字符更高，“浮”起 2–4px - Android WebKit（4.4–7.x）同样用英文 baseline 解析，
font-size为奇数且 -
<button>元素自带 UA 样式：vertical-align: baseline，进一步拉高整行 - 若启用了
-webkit-text-size-adjust: auto（默认），小字号会被强制放大，行高重算失准
什么时候必须放弃 line-height，改用 flex
遇到以下任意一种情况，line-height 就不可靠，应立刻切到 display: flex：
- 按钮含图标（
<svg>或<img>），混合 inline 元素会破坏 baseline 对齐 - 响应式下宽度变窄，文字可能换行——
line-height只控制单行，多行时文字堆顶 - 使用了 CSS 变量或
clamp()动态控制font-size，line-height难以同步缩放 - 父容器是
display: flex或display: grid，此时line-height完全不生效 - 需兼容 iOS 14 及更早、或 Android 4.4 WebView（
align-items: center支持已稳定）
必须写的三行：
立即学习“前端免费学习笔记（深入）”；
Android Adb Skill
下载
Android 开发调试技能，通过系统 ADB 工具操作 Android 设备。以下场景必须触发此技能：(1) 直接 ADB 操作——安装 APK、查看设备列表、抓取 logcat 日志、查看已安装应用、清除应用数据、截图、重启设备、拉取/推送文件、查看 CPU/内存/电池信息、adb shell 操作；(2)...
display: flex;<br>justify-content: center;<br>align-items: center;
少一个都不行；父容器必须有明确高度（height 或 min-height），且清除 line-height 干扰：line-height: normal 写在父级上。
padding 居中比 flex 更稳的三种场景
当首屏性能敏感、需要像素级对齐或内容动态换行频繁时，padding 反而更可控：
- 首屏关键路径（如 LCP 元素），避免 flex 触发额外 layout 计算
- 按钮高度严格对应原生规范（例如
height: 44px），padding: 7px 12px（配font-size: 16px）可稳定复现 - CMS 多语言文案或用户生成内容，换行不可控，
padding-top/padding-bottom不受行数影响
记得加 box-sizing: border-box，并设 height: auto —— 此时高度由 padding 带动，不再依赖行高计算。
最容易被忽略的 Safari 兼容细节
写了 display: flex 不代表万事大吉：
-
<button>必须加-webkit-appearance: none+vertical-align: middle，否则 UA 样式仍会干扰 - 如果父容器用了
font-size: 0（常见于清除 inline 元素间隙），子元素要显式重置font-size，否则文字消失 -
normalize.css必须在所有自定义样式之前加载，否则html { line-height: 1.15 }不生效，整个排版基准就偏了
真机调试时，别只看 DevTools 里的 computed line-height，要点开“Computed”面板，确认最终生效的 height、padding、border 和 font-family 是否都符合预期——偏差往往藏在隐式继承里。
