最上层元素必须用 position: fixed 或 absolute 脱离文档流，再配合 top: 50%、left: 50% 和 transform: translate(-50%, -50%) 才能真正居中；margin: auto 和 flex 在多层遮罩下无效，且需每层独立定位、设 z-index 和宽高以避免层叠上下文污染。
多层遮罩叠加时最上层元素怎么居中
最上层元素（比如弹窗、提示框）必须用 position: fixed 或 position: absolute 脱离文档流，再配合 top: 50% + left: 50% + transform: translate(-50%, -50%) 才能真正居中——靠 margin: auto 或 text-align 在遮罩层里完全无效。
为什么 transform: translate(-50%, -50%) 是唯一靠谱方案
因为遮罩层本身是定位元素（fixed 或 absolute），它的子元素如果用 top: 50%; left: 50%，只是把左上角移到中心点，不等于整个元素居中。只有 transform 能基于自身宽高做偏移，且不触发重排，GPU 加速更稳。
-
top: 50%; left: 50%后必须跟transform: translate(-50%, -50%)，缺一不可 - 别用
margin: auto：它只对display: block且有明确宽高的静态元素生效，对定位元素无效 - 别依赖
flex父容器：多层遮罩常共用同一个父容器（如#overlay），flex会让所有子层都居中堆叠，失去层级控制
多层遮罩下 z-index 和居中容易一起崩的几个坑
z-index 和居中逻辑不是孤立的——它们共享同一个定位上下文，一旦出错，往往同时失效。
- 父容器加了
transform、opacity: 0.99或filter，会隐式创建新层叠上下文，导致子层的z-index只在内部比大小，最上层元素可能被“压”在底层内容下面 - 多个遮罩层共用一个
position: relative父容器时，如果没显式设z-index，浏览器按 DOM 顺序渲染，后插入的元素不一定在最上——必须每层都设明确z-index值（如 1000、1010、1020） - 最上层元素没设
width和height，或内容为空，transform仍会执行，但视觉上“看不见”，误以为居中失败
实际写法：一层遮罩一个定位上下文，最上层独立撑开
不要把所有遮罩层塞进同一个 div#overlay 里再靠 z-index 拉扯。更稳的做法是分层管理：
立即学习“前端免费学习笔记（深入）”；
- 背景遮罩层：
<div id="mask-bg" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999;"></div> - 中间提示层（如 loading）：
<div style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000;">...</div> - 最上层弹窗：
<div style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1001; width: 400px; height: 200px;">...</div>
关键点：每层自己设 position: fixed，自己撑 width/height，自己写 transform 居中——不依赖父容器定位，避免层叠上下文污染。
