弹窗居中推荐用flex或transform：flex需父容器设display: flex、justify-content/align-items: center及min-height: 100vh；transform需弹窗设position: absolute、top/left: 50%及transform: translate(-50%, -50%)，且父级需relative定位。
弹窗不居中，通常是因为定位方式没选对或缺少关键样式。用 flex 或 transform 都能可靠居中，关键是理解它们的适用场景和写法细节。
用 flex 实现全屏居中（推荐）
给弹窗的父容器（比如 body 或一个全屏遮罩层）设置 flex 布局，子元素（弹窗）自然居中：
- 父容器加
display: flex; justify-content: center; align-items: center; - 确保父容器高度撑满视口，例如
min-height: 100vh; - 弹窗本身不用设 position，也不用 margin 或 top/left
- 如果弹窗有固定宽高，居中效果稳定；内容自适应也完全支持
用 transform 实现绝对定位居中（兼容老浏览器）
适合已有 position: absolute 的弹窗结构，不改布局逻辑就能修复：
- 弹窗加
position: absolute; top: 50%; left: 50%; - 再加
transform: translate(-50%, -50%);把自身中心对准坐标点 - 注意：不能只靠 margin 负值，因为弹窗宽高可能未知
- 父容器需是相对定位（
position: relative;）或 body，否则会相对于视口定位
常见踩坑提醒
居中失效往往不是方法错，而是细节漏了：
立即学习“前端免费学习笔记（深入）”；
- flex 方案中，父容器被其他样式（如 padding、margin）挤压，导致高度不足 —— 检查
min-height: 100vh;是否生效 - transform 方案中，忘了加
position: absolute;或写错父级定位上下文 - 弹窗设置了
display: none;时，flex 不会计算它，但 transform 仍占位 —— 显示控制建议用 visibility + opacity 或 JS 切换 class - 移动端 viewport 缩放或滚动时，flex 居中依然稳定；transform 在部分 iOS Safari 中偶有渲染偏移，可加
will-change: transform;优化
基本上就这些。两种方法都不复杂，但容易忽略父容器约束或定位上下文。选 flex 更现代简洁，选 transform 兼容性更好 —— 根据项目需求定就行。
