固定宽高弹窗居中推荐用 transform: translate(-50%, -50%)，需配合 top: 50%、left: 50% 和定位上下文；margin 负值仅适用于已知确切像素宽高的场景，易受动态内容、滚动条、box-sizing 等影响，且不兼容 IE8 以下。
用 margin 负值 + position: absolute 居中弹窗，前提是宽高固定
这个方案能用，但只适用于你知道弹窗确切宽高的场景。比如 width: 400px、height: 250px 这种写死的尺寸。一旦用 %、max-content 或 fit-content，margin 负值就失效——浏览器没法把百分比转成具体像素去算负边距。
常见错误现象：top: 50% 和 left: 50% 写了，但弹窗右下角卡在视口中心，而不是整体居中；或者弹窗闪一下又偏了，尤其是内容动态加载后。
- 必须同时设置
top: 50%和left: 50% -
margin-top和margin-left必须是宽高的一半，且带负号，例如margin-top: -125px - 父容器得有定位上下文（通常是
position: relative或position: fixed）
transform: translate(-50%, -50%) 更安全，推荐优先用
它不依赖具体像素值，也不要求父容器有显式宽高，只要父容器能形成定位上下文就行。现代浏览器全支持，连 IE9+ 都没问题。
使用场景：你改了弹窗内容、加了动画、或用 JS 动态设宽高，用 transform 不会突然偏移；也适合配合 @media 做响应式弹窗（只要宽高还是固定值）。
立即学习“前端免费学习笔记（深入）”；
- 保留
top: 50%和left: 50% - 去掉
margin负值，换成transform: translate(-50%, -50%) - 注意：如果弹窗里用了
position: fixed，transform可能影响其层级或触发新层叠上下文
IE8 及更老浏览器不支持 transform？那就只能退回 margin 负值
IE8 没 transform，也没 calc()，所以必须手算负边距。这时候容易踩的坑不是代码写错，而是“以为自己知道宽高”。比如 CSS 里写了 width: 400px，但 JS 插入内容后触发了滚动条，实际占用宽度变成 400px + scrollbarWidth，margin-left 就不准了。
- 务必确认最终渲染宽高（可用
getBoundingClientRect()校验） - 避免在
:before/:after伪元素里塞内容，它们不参与盒模型计算 - 如果用了
box-sizing: border-box，记得把padding和border算进总宽高里再除以 2
别忘了 z-index 和焦点管理
居中只是视觉问题，但弹窗真正可用还得解决两个隐形问题：被其他元素盖住，以及键盘用户按 Tab 时无法进入弹窗。
-
z-index值要足够大，且确保父容器没设overflow: hidden或transform导致层叠上下文截断 - 弹窗显示后，用 JS 把焦点移到第一个可聚焦元素（如
input或button），并拦截外部Tab键（焦点守卫） - 关闭弹窗时，要把焦点还给触发它的元素，否则屏幕阅读器用户会迷失
