inset + margin: auto 居中更稳，因浏览器自动均分剩余空间，不依赖缩放、dpi或父容器；而 top: 50% + transform 易偏移且需显式宽高。必须同时满足 position: fixed、inset: 0、margin: auto 及明确尺寸。
用 position: fixed + inset 居中弹窗，为什么比 top: 50% + transform 更稳？
因为 inset 是四值简写（等价于 top/right/bottom/left），配合 margin: auto 能让浏览器自动计算居中偏移，不依赖父容器尺寸或滚动状态。而 top: 50% + transform: translateY(-50%) 在某些缩放、iframe 或高DPI设备下会轻微偏移，且必须确保弹窗有明确宽高。
inset 的取值逻辑和常见错误写法
inset 本身不指定“居中”，它只是定位起点。真正触发居中的是 margin: auto —— 浏览器会在 fixed 定位下，把剩余空间均分给上下左右 margin。所以必须同时满足：
-
position: fixed（否则inset无效） -
inset: 0（或显式设为inset: 0 0 0 0） margin: auto- 弹窗需有明确的
width和height（或至少max-width/max-height，否则可能撑满视口）
错误示例：inset: 50% 50% 0 0 不会居中，这是把左上角钉在视口中心；inset: 0 但没写 margin: auto，弹窗会贴满整个视口。
兼容性与 fallback 方案
inset 在 Chrome 87+、Firefox 63+、Safari 14.1+ 支持良好，但 IE 完全不支持，旧版 Safari（
dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
inset: 0;
margin: auto;
width: 400px;
height: 300px;
}
现代浏览器会优先用 inset + margin: auto，老浏览器回退到 top/left + transform。注意：不要用 @supports (inset: 0) 包裹整段，因为 margin: auto 在 fixed 下的居中行为本身也依赖较新渲染逻辑，干脆双写更稳妥。
滚动穿透问题：弹窗固定了，背景还能滚？
position: fixed 只解决弹窗自身不随滚动，但不会阻止背后页面滚动。用户滚动时，背景内容仍在动，视觉割裂。解决方法不是加 overflow: hidden 到 body（会导致滚动条跳变），而是：
- 给
body加overflow: hidden同时记录当前scrollY - 弹窗关闭后，用
window.scrollTo(0, savedScrollY)恢复位置 - 更优解：用
body { overscroll-behavior: contain }阻止滚动穿透（Chrome 63+/Firefox 93+/Safari 16.4+），配合inset弹窗，体验最干净
别漏掉 overscroll-behavior —— 它才是让“固定弹窗 + 静止背景”真正闭环的关键一环，很多人只 fix 了弹窗，忘了锁背景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
