position: fixed 是唯一可靠实现视口居中的方式，因其语义明确相对于视口、滚动不变、现代浏览器兼容性好；absolute 则依赖祖先定位、随文档滚动、受 transform/filter 等影响，无法真正锁定视口。
为什么 position: absolute 不能可靠实现视口居中
因为 position: absolute 的定位基准永远是“最近的已定位祖先元素”，不是视口本身。只有当所有祖先都没设 position（即全是 static）时，它才退到初始包含块（通常是 <html>），而 <html> 的尺寸≈视口——这只是巧合，不是语义保证。
更关键的是：一旦页面滚动，absolute 元素会随文档一起滚动，视觉上立刻“脱离视口”。哪怕你写了 top: 50%; left: 50%，它也只是在滚动前那一帧看起来居中。
- 父容器加了
transform或filter，旧版 Safari / 某些 Android WebView 会强制把absolute降级为相对于该父容器，彻底破坏“视口感” - 移动端横竖屏切换或双指缩放时，
top/left值仍按布局视口计算，但滚动锚点丢失，容易偏移 -
height: 100vh在某些 iOS Safari 场景下不生效，导致top: 50%计算失准
真正能相对于视口居中的唯一方式是 position: fixed
position: fixed 是 CSS 中唯一语义上明确“相对于视口”的定位方式，滚动时坐标恒定，且现代浏览器已基本修复其受祖先 transform 影响的历史问题。
居中写法和 absolute 类似，但语义和行为完全不同：
立即学习“前端免费学习笔记（深入）”；
div {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
-
top: 50%和left: 50%是相对于视口尺寸计算的，不是父容器 -
transform: translate(-50%, -50%)的百分比依然基于元素自身宽高，所以无需知道具体尺寸 - 如果父容器有
overflow: hidden，不影响fixed元素，因为它已脱离整个文档流 - 注意：若必须兼容极老 Android WebView（如 4.4 以下），可加
will-change: transform防止渲染异常
用 absolute + relative 父容器 ≠ 视口居中
常见误解是给一个全屏 <div class="viewport-wrapper"> 加 position: relative; height: 100vh;，再让子元素 absolute 居中——这其实只是把定位上下文限定在那个 wrapper 内，和视口无关。
- 如果 wrapper 高度靠内容撑开（没写
height或min-height），top: 50%就是相对于它实际高度，不是视口 - wrapper 若用了
padding或border，absolute元素的top/left是从 padding box 开始算，视觉上会偏移 - 滚动时，wrapper 本身会滚走，子元素跟着一起滚，根本锁不住视口
什么情况下才该考虑用 JS 补偿
极少数场景下，比如需要“伪固定”——悬浮按钮随滚动出现、又不想遮挡内容（fixed 的 z-index 太高），才值得用 JS 监听 scroll 动态切 position。
- 不要只监听
scroll，还要监听resize和orientationchange（横竖屏） - 避免直接操作
style.top/style.left，优先用transform: translate()提升性能 - 用
getBoundingClientRect()获取当前视口坐标，比手动算window.scrollY+offsetTop更健壮 - 真要这么做，别忘了加
throttle，否则在快速滚动时会严重掉帧
真正需要“相对于视口”的场景，比如全局提示框、返回顶部按钮、吸顶导航栏，别绕弯子——直接用 position: fixed。其他所有方案，都是在模拟，且必然伴随边界 case 和兼容性代价。
