最稳的弹窗居中方案是遮罩层用 position: fixed + 100vw/100vh + display: flex，弹窗作为其子元素通过 justify-content 和 align-items 居中；需避免 100% 宽高、transform 居中、opacity 背景及层叠上下文干扰。
直接给遮罩层用 position: fixed + display: flex，弹窗放里面靠 justify-content 和 align-items 居中——这是目前最稳、最不容易翻车的方案。
遮罩层必须用 fixed + 100vw/100vh，不能只写 100%
常见错误是写 width: 100%; height: 100%，结果遮罩只盖住内容区，滚动时跟着动，或者底部留白。这是因为 100% 是相对于父容器计算的，而父容器可能没撑满视口。
-
top: 0; left: 0; width: 100vw; height: 100vh才能真正覆盖整个视口 - 如果页面有横向滚动条，
100vw会被挤窄，保险写法是width: 100%; min-width: 100vw - 检查所有祖先元素是否加了
transform、overflow: hidden、filter或will-change——这些会创建新层叠上下文，让fixed相对于该祖先定位，而不是视口
弹窗居中别依赖 transform: translate(-50%, -50%)
纯 top: 50%; left: 50%; transform: translate(-50%, -50%) 看似简单，但容易在动态内容场景下错位：比如弹窗里图片还没加载完，高度为 0，计算就偏了；IE 中 transform 还可能引发文字模糊。
- 把弹窗作为遮罩层的直接子元素，用
display: flex; justify-content: center; align-items: center居中，不依赖尺寸，也不触发重排 - 弹窗本身设明确宽高（如
max-width: 500px）、background、border-radius和box-shadow，视觉更可控 - 避免给弹窗设
position: absolute，它不需要脱离文档流——父遮罩已经是fixed且flex，子元素天然居中
遮罩背景必须用 rgba()，禁用 opacity
opacity: 0.6 看起来省事，但它会让整个遮罩层（包括里面的关闭按钮、图标等）都变透明，可读性直接崩坏。
- 遮罩层用
background-color: rgba(0, 0, 0, 0.6)，透明度只作用于背景色 - 弹窗内部元素不受影响，文字、按钮保持清晰
- 如果后续要在遮罩层里加加载动画或关闭按钮，这点尤其关键——它们不该“发虚”
z-index 和层级关系要小心处理
遮罩层和弹窗必须同级或共属一个干净父容器，中间任何一层悄悄加了 transform 或 z-index 都可能截断渲染，导致弹窗被遮挡或错位。
- 遮罩层
z-index: 100，弹窗z-index: 101（至少高一级） - 不要把弹窗塞进某个
position: relative的模块里再套遮罩——那会限制定位参考范围 - 确保弹窗和遮罩没有共同祖先设置了
overflow: hidden，否则内容可能被裁切
真正麻烦的不是怎么写居中，而是那些看不见的层叠上下文和祖先样式干扰——它们往往在上线后才暴露，而且很难一眼定位。动手前先 inspect 一下遮罩层的 computed styles，确认它的 position 确实是 relative to viewport，而不是某个 div。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
