iOS Safari与Chrome浏览器垂直对齐表现差异 overlay div居中异常咨询

• 首先明确 Chrome 开发者工具的 iPhone 模拟模式未完全复刻 Safari 内核的渲染规则，二者对行高、垂直对齐的默认计算逻辑存在原生差异，这就是你在模拟器中看到居中、实机 Safari 不居中的核心原因。
• 针对你的姓名 overlay 元素，优先排查两种常见的实现场景问题：
  • 若你使用 Flex 布局实现居中：Safari 对 Flex 容器内的行内文本元素基线计算规则和 Chrome 不同，你可以将父容器的居中方案替换为 display: grid + place-items: center，Grid 布局在两个浏览器下的对齐兼容性表现更一致，也可以给文字元素额外添加 transform: translateY(0) 强制触发 Safari 的图层渲染，消除默认偏移。
  • 若你使用绝对定位 + transform: translateY(-50%) 实现居中：Safari 对添加了半透明、毛玻璃效果的元素偏移计算会有1-2px的误差，你可以给文字元素明确设置 line-height: 1、margin: 0，同时固定声明字体的字号、字重，避免 Safari 默认的字体缩放调整带来的高度计算偏差。
• 快速定位问题的方法：

给 overlay div 添加临时的醒目边框，在 Safari 实机下查看边框是否居中：如果边框居中仅文字偏移，说明是文字的行高/边距问题，调整文字本身的样式即可；如果边框都不居中，直接替换容器的居中方案即可。

内容的提问来源于stack exchange，提问作者Anthony