弹窗宽度超出视口应使用 width: clamp(300px, 90%, 500px) 并配合 max-height: 80vh 和 overflow-y: auto；遮罩层须用 position: fixed + 100vw/100vh；弹窗 DOM 需挂载至 body 下以避免父级 transform 截断。
弹窗宽度超出视口怎么办
小屏设备上，固定宽度（如 width: 500px）的弹窗极易右边缘被裁切，用户看不到确认按钮或关闭叉。这不是“居中失败”，而是尺寸失控。
- 直接用
width: 90%保证留边，再加max-width: 500px防大屏过宽 - 配合
margin: 20px auto居中，避免右侧意外溢出 - 更平滑的方案是
width: clamp(300px, 90%, 500px)，但注意 IE 全系不支持
别依赖 left: 50% + transform 自动缩放——它只调位置，不管尺寸是否撑爆。
内容撑高导致底部被截断
弹窗内容异步加载后高度突增（比如展开详情、插入图片），transform: translate(-50%, -50%) 不会自动重算，结果底部消失在视口外。
- 给弹窗容器设
max-height: 80vh和overflow-y: auto，让内部滚动 - 避免对整个弹窗设
height: 100%或min-height，这会强制拉伸并压垮布局 - 若必须动态重居中，监听
resize或手动触发一次getBoundingClientRect()后强制重排（例如临时切换display: none → block）
注意：iOS Safari 键盘弹出时 visualViewport.height 缩小，fixed 定位仍按原始视口计算，视觉上浮——这时仅靠 CSS 无效，需 JS 微调 top 值。
立即学习“前端免费学习笔记（深入）”；
遮罩层没铺满导致边缘可点
常见错误是遮罩层只写 width: 100%; height: 100%，结果在滚动页或嵌套容器里漏出背景内容，用户能点到背后按钮。
- 必须用
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh -
100vw/100vh才真正覆盖可视区域，100%是相对父容器，不可靠 - 遮罩层加
background-color: rgba(0, 0, 0, 0.5)，别用opacity，否则弹窗也变透明
如果页面有横向滚动条，100vw 会包含滚动条宽度，偶尔右侧多出空白——此时可改用 width: 100% + right: 0 补偿，但多数场景 100vw 更稳。
移动端 fixed 定位被父级 transform 截断
Android WebView 和 iOS Safari 中，若弹窗父容器有 transform、perspective 或 filter，position: fixed 会失效，降级为 relative 定位，导致滚动时弹窗乱跑。
- 弹窗 DOM 必须脱离任何带
transform的父节点，直接挂到body下最安全 - 检查控制台是否有 “Containing block is not viewport” 类提示
- 不要用
overflow: hidden包裹弹窗容器——fixed元素天然绕过该限制，反而可能干扰遮罩层
真正麻烦的不是写法，而是你改了父组件一个 scale(0.95)，弹窗就偏了 20px 却查不出原因。遇到定位飘移，先搜页面里有没有 transform。
