position: fixed 配合 top: 50%、left: 50% 和 transform: translate(-50%, -50%) 是现代浏览器下实现模态框水平垂直居中的最稳方案，不依赖父容器高度、不受文档流影响且适配滚动页面。
用 position: fixed + transform 是最稳的方案
现代浏览器下，position: fixed 配合 top: 50%、left: 50% 和 transform: translate(-50%, -50%) 是实现模态框（弹出框）水平垂直居中的首选。它不依赖父容器高度，也不受文档流影响，适配滚动页面。
-
top: 50%和left: 50%把元素左上角定位到视口中心 -
transform: translate(-50%, -50%)将自身向左、向上各回退自身宽高的一半，实现真正居中 - 必须给弹出框设置
position: fixed，否则top/left在普通文档流里无效 - 如果弹出框内容动态变化（比如加载后才显示），确保
transform不被其他 CSS 覆盖（例如transform: none）
避免用 margin: auto + position: absolute
很多人试过给弹出框设 position: absolute、top: 0、bottom: 0、left: 0、right: 0，再加 margin: auto，但这个方案有明显缺陷：
- 仅在父容器有明确高度时才生效；弹出框父级若没设
height或是body，基本不居中 - IE11 及更老版本对
margin: auto在绝对定位下的支持不一致，容易偏移 - 当弹出框内容超出视口（比如超长文本），
margin: auto会失效，而transform方案仍能保持居中（只是可能被截断）
响应式场景下要限制最大宽度和内边距
居中本身解决了位置问题，但小屏设备上容易撑破视口或文字挤成一团。别只盯着“居中”，还得控制尺寸和留白：
- 给弹出框设
max-width: 90vw和max-height: 90vh，防止溢出 - 用
padding: 24px这类固定值，而不是百分比，避免小屏下 padding 过小 - 如果弹出框含表单或按钮，确保
min-width不低于 320px，否则 iPhone 竖屏下按钮太窄难点 - 慎用
width: 100%—— 它会让弹出框贴满视口，失去“弹出”感
JavaScript 控制显隐时，记得同步操作 body 的滚动锁定
弹出框显示时，用户滚动页面会导致背景内容位移，体验割裂。这不是居中问题，但常被忽略，且直接影响弹出框可用性：
- 显示弹出框前，加
document.body.style.overflow = 'hidden' - 隐藏时恢复
document.body.style.overflow = ''（不要硬写'auto'，避免覆盖原有样式） - 如果弹出框高度超过视口，用户无法滚动查看全部内容，此时应给弹出框内部容器设
overflow-y: auto，而非放开 body 滚动 - 移动端 Safari 对
overflow: hidden在body上的支持有延迟，建议加document.body.style.position = 'fixed'作为补充（关闭时需一并还原）
position: fixed 在缩放或横竖屏切换时的重绘异常——这些往往比居中本身更耗时间。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
