最稳的弹窗居中方式是position: absolute配合transform: translate(-50%, -50%)，需父容器设position: relative提供定位上下文，先用top: 50%和left: 50%将左上角移至中心，再通过translate回拉自身宽高一半实现精准居中。
弹窗居中用 position: absolute + transform: translate(-50%, -50%)
这是目前最稳、兼容性最好、不依赖 JS 计算的居中方式。它不要求你知道弹窗宽高，也不怕内容动态加载后变高。
常见错误现象：left: 50% + top: 50% 单独写，结果弹窗右下角飘出视口——因为只是把左上角挪到中心，没回拉。
- 父容器（比如
<body>）必须设position: relative，否则absolute会相对于 viewport 定位，滚动时错位 - 弹窗本身要设
position: absolute，再配left: 50%、top: 50%、transform: translate(-50%, -50%) - 如果弹窗是
position: fixed（比如遮罩层上的子层），那它父容器就是 viewport，无需额外设relative
遮罩层用 position: fixed 防止滚动穿透
遮罩层（.mask）必须用 position: fixed，否则页面一滚动它就跟着跑，失去模态效果。
典型样式：
立即学习“前端免费学习笔记（深入）”；
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
z-index: 999;
display: none;
}注意：height: 100% 在 fixed 下等效于视口高度，不用管文档总高度；z-index 要比弹窗低（比如弹窗设 1000），否则点不到按钮。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
禁止页面滑动的关键是双保险：CSS + touchmove
只设 body.style.overflow = 'hidden' 在 iOS 上基本无效，安卓可能 OK，但真机测试大概率失效。
必须同时做两件事：
- 给
<html>和<body>都加overflow: hidden+height: 100% - 在弹出时绑定
touchmove到document，并调用e.preventDefault()
关闭弹窗时，记得还原：html.style.overflow = 'auto'、body.style.overflow = 'auto'，并移除 touchmove 监听器。
IE9+ 兼容要注意 transform 的写法
transform: translate(-50%, -50%) 在 IE9+ 支持，但对 inline 元素（如 <span>）无效。弹窗必须是块级元素（div、section 等）。
如果项目还要支持 IE8，就得切回 JS 计算方案：obj.css({ left: (winW - obj.width())/2, top: (winH - obj.height())/2 + $(document).scrollTop() })，但此时滚动条位置变化必须监听 scroll 事件重算。
现代项目里，优先用 CSS 方案；JS 方案只作为降级兜底，别默认依赖它——滚动监听开销大，且容易漏掉 resize 或动态内容变化后的重定位。
