中间悬浮广告必须用 position: fixed + top: 50% + left: 50% + transform: translate(-50%, -50%) 实现居中，margin: auto 在 fixed 下失效因脱离文档流无参照；需严格控制 z-index、背景透明度、响应式缩放及 DOM 清理。
中间悬浮广告不能靠 float 或 position: relative 实现，必须用 position: fixed + 明确的 top/left 偏移 + transform: translate(-50%, -50%) 居中，否则会随滚动偏移、错位或触发回流抖动。
为什么 margin: auto 在 fixed 定位下失效
当元素设为 position: fixed，它已脱离文档流，margin: auto 失去参照（没有包含块的宽高约束），浏览器无法自动计算居中值。实测中直接写 margin: auto 会导致广告卡在左上角或不渲染。
正确做法是：显式设置 top: 50% 和 left: 50%，再用 transform: translate(-50%, -50%) 反向偏移自身尺寸。
- 只写
top: 50%; left: 50%→ 广告左上角落在视口中心，整体偏右下 - 漏掉
transform→ 点击区域错位，尤其在 Safari 上拖拽时明显偏移 - 用
right: 50%替代left: 50%→ 逻辑反了，结果完全偏离中心
z-index 和遮罩层必须同步控制
中间悬浮广告天然覆盖主内容，若没处理层级和穿透，用户会误点底层按钮、表单失焦、iOS 键盘弹出异常。
立即学习“前端免费学习笔记（深入）”；
- 广告容器必须设
z-index: 1001（比主内容高，但低于全局 toast 弹窗的1002+） - 必须加半透背景：
background: rgba(255, 255, 255, 0.94)，纯白或全透明都不可接受 - 若广告含按钮，需额外加
backdrop-filter: blur(2px)（仅现代浏览器），否则文字边缘发虚 - 禁止用
pointer-events: none全局关闭交互——这会让关闭按钮也失效
响应式缩放与关闭后 DOM 清理
中间广告在小屏上极易撑满屏幕、遮挡关键操作，且关闭后若只 display: none，仍会响应 focus 事件或被屏幕阅读器读取。
- 移动端用
@media (max-width: 768px)缩小宽度：width: 90vw; max-width: 320px; - 关闭按钮点击后，应执行
element.remove()，而非仅切visibility - 若需记录关闭状态，用
localStorage.setItem('ad_closed_mid', '1')，注意加时间戳防缓存 - 避免在
window.addEventListener('scroll')里重算位置——fixed 元素本就不随滚动，监听纯属浪费性能
真正容易被忽略的是「中间广告是否该拦截键盘事件」：如果广告内有输入框，按 Tab 会跳到背景页面的按钮；如果没输入框，又得防止用户按 Esc 意外关闭其他模态框。这个边界判断，比写几行 CSS 要花三倍时间对齐逻辑。
