用position: fixed+inset居中可确保缩放不偏移，需同时满足：position为fixed或absolute、元素有明确宽高、父级无transform/filter等干扰属性；而top: 50%+transform因依赖包含块且易受环境干扰，在缩放时易偏移。
用 position: fixed + inset 实现缩放不偏移的居中
现代浏览器（Chrome 89+、Firefox 63+、Edge 79+、Safari 15.4+）下，position: fixed 配合 inset: 0 和 margin: auto 是最直接、最稳定的方式——它不依赖视口尺寸计算，也不触发重排，窗口缩放时天然保持居中。
但必须满足三个硬性条件：
-
position值必须是fixed或absolute（relative或static下inset完全无效） - 元素必须有明确的宽高限制（如
width: 400px、max-width: 90vw），否则margin: auto在fixed上不生效 - 父级不能有
transform、perspective或filter，否则会创建新包含块，fixed元素就不再相对视口定位
为什么 top: 50% + transform 在缩放时容易偏移
这套写法看似通用，但在真实项目中缩放抖动频发，核心原因不是代码写错，而是环境干扰：
- 父容器哪怕只加了
transform: scale(1)，fixed元素就会相对于该父层定位，top: 50%失效 - 页面用了
100vh作遮罩高度？滚动后 iOS Safari 不更新该值，缩放时视觉错位立刻暴露 - 动画中频繁修改
transform可能触发合成层重排，尤其在低端 Android 设备上表现明显
这不是 bug，是渲染机制决定的——transform 的百分比基于自身尺寸，而 top/left 基于包含块，混用时语义冲突。
兼容旧 Safari（
Safari 15.3 及更早版本不支持 inset，但也不能简单回退到 top: 50% + transform——因为 iOS 地址栏收起/展开时，fixed 元素不会重绘位置，弹窗常卡在错误坐标。
稳妥做法是双写，并用 @supports 分层：
.modal {
position: fixed;
inset: 0;
margin: auto;
width: 400px;
height: 300px;
}
@supports not (inset: 0) {
.modal {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
注意：@supports (inset: 0) 不能包裹整段样式，否则 Safari 15.3 会忽略全部规则；只对降级部分做检测更安全。
移动端 iOS fixed 抖动的临时缓解
iOS Safari 的 fixed 居中抖动本质是浏览器 bug，CSS 无解。临时缓解可监听事件强制重排：
- 监听
scroll和resize，执行document.body.style.transform = 'translateZ(0)'再立即清空 - 更彻底的方案：放弃
fixed，改用position: absolute+ JS 动态设height: ${window.innerHeight}px，并在resize和orientationchange时更新
真正复杂的地方不在写法本身，而在你是否意识到：所谓“居中”，从来不是 CSS 单独能兜底的事——它和视口行为、渲染管线、甚至系统 UI 变化都耦合在一起。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
