弹窗居中不能只靠top: 50% + left: 50%，因为该组合仅将弹窗左上角定位到父容器中心，导致整体偏右下；必须配合transform: translate(-50%, -50%)将其自身宽高一半回拉，才能实现视觉中心对齐，且需父容器设position: relative提供定位上下文。
弹窗居中为什么不能只靠 top: 50% + left: 50%
只写 top: 50% 和 left: 50%，弹窗左上角会落在父容器中心——结果是整体偏右下，视觉明显错位。真正居中需要把自身“拉回一半宽高”，而 transform: translate(-50%, -50%) 就是干这事的。它不依赖元素具体尺寸，也不触发重排，动画更顺滑。
常见错误现象：弹窗一闪就位、边缘抖动、在 Safari 或旧版 Chrome 中偏移。这些大多是因为漏了 transform，或父容器没设 position: relative 导致定位上下文失效。
- 父容器必须有
position: relative（或absolute/fixed），否则top/left会相对于 viewport 计算，滚动时错位 -
transform在 IE9+ 支持，但对span、img这类 inline 元素无效，弹窗内容务必用div包裹 - 如果弹窗宽高动态变化（比如加载后展开），
transform不会自动重算——但视觉居中不受影响，这点比负 margin 更鲁棒
如何让弹窗出现时带缩放+淡入动画
纯 CSS 动画最轻量，关键在组合 opacity、visibility 和 transform。直接改 display 会中断 transition，必须用 visibility 控制是否可交互，用 opacity 控制透明度，用 transform: scale() 控制大小。
典型写法：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
/* 初始隐藏状态 */<br>.modal {<br> opacity: 0;<br> visibility: hidden;<br> transform: scale(0.9);<br> transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;<br>}<br><br>/* 显示状态 */<br>.modal.show {<br> opacity: 1;<br> visibility: visible;<br> transform: scale(1);<br>}- 必须同时控制
visibility和opacity：只改opacity会导致点击穿透；只改visibility会无过渡效果 -
scale(0.9)比scale(0)更自然——后者在某些设备上渲染异常，且缩放为 0 时子元素事件可能失效 - JS 触发时，先加
show类，不要用setTimeout延迟操作，transition 本身已接管时序
scrollIntoView 能不能替代弹窗居中？
不能。两者解决的问题完全不同：scrollIntoView 是滚动容器使目标元素可见，适用于列表、锚点跳转；弹窗居中是脱离文档流的绝对定位控制，目标是让弹窗自身在视口内精准居中。混用反而出问题——比如你在弹窗里调用 el.scrollIntoView()，它只会滚动弹窗内部内容，不影响弹窗位置。
容易踩的坑：
- 误以为给弹窗加
id="popup"再执行document.getElementById('popup').scrollIntoView()就能居中——实际只是把弹窗左上角滚到视口顶部 - 在
position: fixed弹窗上用scrollIntoView，浏览器可能忽略，因为 fixed 元素不在常规滚动流中 - SPA 中弹窗由 JS 动态插入 body，若没等 DOM 渲染完成就调用居中逻辑，
offsetWidth/offsetHeight可能为 0，导致计算错误
Flex 居中在弹窗里为什么容易翻车
Flex 看着简单，但在真实弹窗场景里限制多：它要求父容器有明确高度，而弹窗常挂载在 body 上，body 默认没有高度，height: 100% 会失效。除非你显式写 min-height: 100vh，否则 justify-content: center 和 align-items: center 都白搭。
更麻烦的是，如果弹窗本身用了 position: fixed（绝大多数情况都该用），那外层 flex 容器就完全不起作用——fixed 元素已脱离文档流，flex 布局对它无效。
- 想用 Flex，就得把弹窗包裹在一个有
display: flex的固定高度容器里，而不是直接插在body下 - 移动端键盘弹起时，
vh会变小，导致 flex 居中偏移，position: absolute + transform反而更稳 - IE10+ 支持 flex，但老项目若需兼容 IE9，只能退回 absolute + transform 方案
真正难的不是选哪种居中方式，而是判断弹窗所处的定位上下文是否稳定——比如 JS 动态插入后，父容器是不是 still position: static，有没有被其他 CSS 规则意外覆盖。这个细节在调试时最容易被忽略。
