position: fixed + transform 是最稳的弹窗居中方案，因 fixed 脱离文档流且响应滚动，transform: translate(-50%, -50%) 精准居中不依赖宽高，配合合理 z-index 分层（遮罩层1000、弹窗1001）和 100vw/100vh 防漏光，兼顾兼容性与健壮性。
用 position: fixed + transform 居中最稳
遮罩层下弹出登录框，必须脱离文档流且响应滚动，position: fixed 是唯一可靠选择。只设 left: 50% 和 top: 50% 会偏移——因为定位原点是元素左上角，不是中心。
必须补上 transform: translate(-50%, -50%) 才真正居中。这个组合不依赖宽高，适配动态内容（比如表单字段增减后高度变化）。
-
position: fixed让登录框始终相对于视口定位，滚动时不会跑位 - 父容器不需要设
position: relative（和absolute不同） - 避免用
margin: auto或text-align: center，它们对fixed元素无效 - 如果登录框内有
position: absolute子元素，注意z-index层级别被遮罩层盖住
z-index 值设错会导致登录框被遮罩层盖住
遮罩层和登录框的 z-index 必须严格分层：遮罩层在下，登录框在上，且两者之间不能有其他同级元素插队。
常见错误是把遮罩层设成 z-index: 999，登录框也设成 999 —— 这时谁在 DOM 里靠后谁显示在上，不可控。
- 遮罩层推荐
z-index: 1000 - 登录框至少
z-index: 1001，关闭按钮等交互元素可设1002 - 不要用超大数字如
999999，容易和第三方库（如弹窗组件、UI 框架）冲突 - 检查浏览器开发者工具的 Layers 面板，确认遮罩层和登录框是否真的在不同堆叠上下文里
遮罩层全屏覆盖要防滚动条“漏光”
用 width: 100%; height: 100% 做遮罩层，在页面内容高度超过视口时，右侧滚动条出现会导致遮罩层宽度不足，右边露出白边。
正确做法是用 width: 100vw; height: 100vh，或更稳妥地监听 resize 和 scroll 动态重设尺寸。
-
100vw是视口宽度，含滚动条宽度；100vh是视口高度，不含地址栏等 UI 区域 - 如果页面有横向滚动（比如表格溢出），
100vw可能不够，此时改用position: fixed; top: 0; left: 0; right: 0; bottom: 0 - 透明度统一用
opacity: 0.7，别混用filter: alpha(opacity=70)（IE6–8 已淘汰）
现代方案：直接用 <dialog></dialog> 标签
如果你不需要兼容 IE 或旧版 Safari（<dialog></dialog> 在 Safari 15.4+ 才完全支持），<dialog></dialog> 是最简方案：自带遮罩层、自动居中、键盘焦点管理、ESC 关闭。
只需两行 CSS 就能控制样式：
dialog {
margin: 0;
padding: 20px;
}
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.6);
}
- 调用
dialog.showModal()自动居中并锁定背景 - 不用手动写遮罩层 DOM、不用管
z-index层级 - 但注意：它默认禁用页面滚动，若登录框内容多需加
overflow-y: auto - 无法用 CSS 伪类控制遮罩层动画（比如淡入），得靠 JS 监听
open事件后加 class
vh 单位会失准，这时候 transform 方案反而比 <dialog></dialog> 更可控。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
