用 top: 50% + translatey(-50%) 会偏移，因 top: 50% 受父容器滚动位置（window.scrolly）影响，而 translatey 不受滚动影响，导致叠加计算失准；正确方案是 top: 0 + bottom: 0 + margin: auto（需父容器 fixed/relative 且子元素有固定高度）。
为什么用 top: 50% + translateY(-50%) 会偏移？
常见现象是弹窗顶部“卡”在视口上方、或整体下坠一截，尤其在滚动页面后更明显。根本原因在于：top: 50% 是相对于父容器（通常是 body 或最近的定位祖先）的 top 边缘计算的，而该父容器本身可能有滚动偏移（window.scrollY），但 translateY 不受滚动影响——它只作用于元素自身的坐标系。两者叠加时，浏览器先按滚动后的位置算 top，再平移，结果就漂了。
正确做法：改用 top: 0 + bottom: 0 + margin: auto
这是最稳定、无需 JS、不依赖滚动状态的垂直居中方案，前提是弹窗有明确高度且父容器设为 position: relative 或 position: fixed。
实操建议：
- 给弹窗父容器（如遮罩层）设置
position: fixed; top: 0; left: 0; width: 100%; height: 100% - 给弹窗自身设固定高度（如
height: 400px）、position: absolute，并同时声明top: 0; bottom: 0; left: 0; right: 0 - 加上
margin: auto—— 浏览器会自动把剩余空间均分到上下左右，实现真正居中 - 注意：此法要求弹窗不能用
min-height或height: fit-content，否则margin: auto在绝对定位下失效
如果必须用 translate，就得脱离文档流并重置参考点
比如要配合动画库、或需动态计算尺寸，那就得切断滚动干扰源：
实操建议：
- 弹窗容器用
position: fixed（不是absolute），这样它的top: 50%就永远相对于视口，不受父级滚动影响 - 确保没有其他定位祖先干扰（检查
position: relative/absolute/fixed的父元素层级） - 写法统一为：
top: 50%; left: 50%; transform: translate(-50%, -50%)—— 注意是transform，不是translateY单独用 - 避免在弹窗上同时设
margin和transform，二者叠加可能导致像素对齐异常
移动端 Safari 下 fixed + translate 仍偏移？加 viewport-fit=cover
iOS Safari 在地址栏收起/展开时会动态调整视口高度，导致 top: 50% 计算错位。这不是 CSS 错，是视口元信息没对齐。
解决方法只有一行：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
这个 viewport-fit=cover 告诉 Safari：请把页面渲染区域撑满整个物理屏幕，别预留安全区空白——之后 fixed 元素的百分比计算才真正可靠。
容易被忽略的是：即使你没用刘海屏，iOS 15+ 默认也会启用安全区逻辑，所以只要用 fixed 居中，这行 meta 就该默认加上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
