应改用 display: flex + justify-content: center + align-items: center 实现垂直居中，因 line-height 依赖字体度量，safari（尤其是 ios 15+）对中文字体 ascent/descent 解析不一致，叠加隐式 vertical-align: baseline 和 -webkit-text-size-adjust 导致文字偏上 2–4px。
别调 line-height 数值了，它在 Safari（尤其是 iOS 15+）里根本不可靠——文字偏上不是你写错了，是浏览器用英文度量算中文行高，再叠加 text-size-adjust 和隐式 vertical-align: baseline 导致的系统级偏差。
为什么 line-height: 44px + height: 44px 在 Safari 真机上还是偏上
因为 line-height 居中依赖字体自身的 ascent/descent 度量，而 Safari 渲染中文字体时：
- 默认 fallback 到 -apple-system 或 system-ui，这些字体的英文度量被优先采用
- 实际渲染中文时 ascent 更高，文字视觉上“浮”起 2–4px
- iOS 15+ 还会给 <button></button> 注入隐式 vertical-align: baseline，进一步破坏对齐
- 如果同时启用了 -webkit-text-size-adjust: auto（默认），小于 16px 的字号会被强制放大，行高重算失准
必须写的三行 Flex 居中代码
只写 display: flex 不生效，Safari 要求显式、完整、无干扰：
-
display: flex+justify-content: center+align-items: center—— 少一个都不行 - 父容器必须有明确高度：
height、min-height或被上下文撑开（不能是height: auto） - 清除所有
line-height干扰：line-height: normal写在父容器上，防止继承或 UA 样式污染 - 对
<button></button>额外加：-webkit-appearance: none+vertical-align: middle
遇到这些情况，立刻放弃 line-height 改用 padding
Flex 在某些场景反而引入不确定性，padding 更可控：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 首屏渲染极敏感（比如 LCP 关键路径）
- 需兼容 Android 4.4 WebView 或 iOS 14 及更早 Safari（
flex对align-items支持不稳定） - 按钮高度必须像素级对齐原生 App（例如
height: 44px严格对应 iOS 安全区域） - 内容动态换行频繁（CMS 或多语言文案），
padding-top/padding-bottom不受行数影响
示例：padding: 7px 12px（对应 font-size: 16px），配合 box-sizing: border-box 和 height: auto 即可稳定居中。
最容易被忽略的 Safari 兼容细节
不是写了 Flex 就万事大吉，Safari 的坑藏在默认行为里：
-
<button></button>的 UA 样式无法被 CSS reset 彻底清除，必须用-webkit-appearance: none手动剥离 -
text-size-adjust默认开启，务必加：-webkit-text-size-adjust: 100%（iOS Safari 专属） - 如果父容器是
inline-flex或被float影响，Safari 可能拒绝计算基线，改用block或flex显式声明 - 老 iOS（如 14.x）不支持
align-items: center在flex-direction: row下的正确计算，需补display: -webkit-box+-webkit-box-align: center
真正稳的解法，永远是先清样式（-webkit-appearance、line-height、vertical-align），再上布局（flex 或 padding），而不是在 line-height 上反复试 43.8px、44.2px 这种玄学数值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
