用position: fixed+transform实现真居中：先设top: 50%、left: 50%将左上角定位至视口中心，再用transform: translate(-50%, -50%)反向偏移自身宽高一半，确保弹窗稳钉视口中央且不随滚动偏移。
用 position: fixed + transform 实现真居中，不随滚动偏移
弹窗要稳稳钉在视口中央、滚动时不动，必须用 position: fixed，不是 absolute。只写 top: 50%; left: 50% 会让左上角落在中心点，结果整体偏右下。得补一句 transform: translate(-50%, -50%) 把自身回拉一半宽高。
常见错误包括：absolute 下弹窗跟着父容器滚动；margin: auto 在 fixed 下完全无效；没设 z-index 被导航栏或广告位盖住。
- 遮罩层也要用
position: fixed，并设inset: 0（或top: 0; right: 0; bottom: 0; left: 0）覆盖全屏 -
z-index推荐值：遮罩层1040，弹窗主体1050，避免和第三方库冲突 - 确保
body没有transform、filter等创建新层叠上下文的属性，否则z-index失效
为什么 flex 布局在弹窗里容易翻车
用 display: flex 包裹遮罩层再居中弹窗，看似简洁，但真实项目里常出问题：弹窗内容高度超过视口时，iOS Safari 可能无法正确约束溢出；页面已有自定义滚动容器（比如 overflow: hidden 的 wrapper）会干扰 flex 的居中行为；如果遮罩层不是 body 直接子级，层级或定位可能错乱。
相比之下，position: fixed 更独立——它不依赖父容器高度，也不吃文档流影响，更适合模态交互场景。
- 若坚持用
flex，父容器必须有可计算高度，如min-height: 100vh -
justify-content: center和align-items: center必须同时存在，缺一不可 - 别在
body上直接设display: flex，可能意外破坏全局排版
遮罩层点击关闭时，怎么防止误关弹窗
遮罩层点击事件默认会冒泡到弹窗内部，导致点按钮也触发关闭。关键是要判断 event.target 是否等于遮罩层本身，而不是它的子元素。
示例逻辑：
overlay.addEventListener('click', (e) => {
if (e.target === overlay) {
hideModal();
}
});
- 别用
e.target.classList.contains('mask')这类松散判断，容易被子元素 class 干扰 - 弹窗内容区需加
pointer-events: auto（遮罩层默认是auto，但某些重置 CSS 可能改掉） - 移动端要注意
click有 300ms 延迟，可考虑用touchstart替代，但需防重复触发
用原生 <dialog></dialog> 元素时，居中和遮罩怎么配
<dialog></dialog> 在 Firefox 中默认居中，在 Chrome/Safari 中需要手动加 position: fixed 和 transform 才能稳定居中。它的 ::backdrop 伪元素可以控制遮罩样式，但必须显式设置背景色，否则透明。
兼容性仍是硬伤：Safari 15.4+ 才完全支持，旧版 iOS/macOS 用户会看到无遮罩、无焦点捕获、ESC 不生效的问题。
- 基础样式必须写：
dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } - 遮罩样式：
dialog::backdrop { background: rgba(0,0,0,0.5); } - 降级方案中，
aria-modal="true"和role="dialog"必须加上，否则屏幕阅读器无法识别
div 而非 body，又没给该 div 加 position: relative，那 absolute 就会找错参考系。这点在组件化开发中特别容易被忽略。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
