最稳的纯CSS居中弹窗方案是position: fixed配合top: 50%、left: 50%和transform: translate(-50%, -50%)，需确保宽高明确、遮罩与弹窗同层叠上下文、响应式用width: fit-content加max-width、并手动管理键盘焦点。
用 position: fixed + transform 实现真居中
纯 CSS 居中弹窗最稳的方案不是靠 margin: auto，也不是靠 flex 父容器——因为弹窗要脱离文档流、覆盖全屏，position: fixed 是前提。top: 50% 和 left: 50% 只是把元素左上角移到中心，必须用 transform: translate(-50%, -50%) 回拉自身宽高的一半。不加这句，弹窗永远偏右下。
-
top和left必须设为50%，不能写成0或auto -
transform值必须严格是translate(-50%, -50%)，写成translateX(-50%)少了 Y 轴会导致垂直不居中 - 弹窗本身得有明确宽高（或内容能撑开），否则
transform的“一半”无从计算
遮罩层 z-index 和层级陷阱
遮罩层（overlay）和弹窗本体必须在同一个 stacking context 下，否则 z-index 会失效。常见错误是父容器用了 opacity、transform 或 filter，无意中创建了新层叠上下文，导致弹窗被压在底下。
- 遮罩层
z-index设为999，弹窗本体至少1000，但前提是它们没有被中间某个z-index: 1的祖先截断 - 检查弹窗父级是否带
transform——哪怕只是transform: translateZ(0)，也会隔离层级 - 移动端 Safari 对
position: fixed在滚动时偶有渲染错位，加will-change: transform可缓解
响应式宽度与 max-width 冲突
固定宽高在小屏上会溢出，但直接写 width: 90% 又可能在大屏上太窄。关键不是百分比，而是用 max-width 控制上限，再配合 width: fit-content 或 width: max-content 让内容决定基础尺寸。
- 推荐写法：
width: fit-content; max-width: 90vw; margin: 0 auto;（注意：fit-content在旧版 Safari 需加-webkit-前缀） - 避免只设
width: 100%——它会让弹窗强行撑满视口，失去“弹窗感” - 如果弹窗内有表单或图片，记得给
img加max-width: 100%，否则可能撑破容器
键盘焦点与 inert 属性的兼容性现实
模态弹窗必须拦截背景内容的键盘操作（比如 Tab 键），原生 inert 属性最干净，但 Chrome 105+ 才支持，Firefox 和 Safari 还没跟上。现在只能手动管理 tabindex 和 focus。
立即学习“前端免费学习笔记（深入）”；
- 打开弹窗时，遍历所有可聚焦元素（
button、a[href]、input等），统一设tabindex="-1" - 关闭弹窗后，得恢复它们原来的
tabindex值（不能全设回0，否则破坏原有顺序） - 首次打开时，务必将焦点移到弹窗第一个可聚焦子元素，否则屏幕阅读器用户会迷失
