transform: translate(-50%, -50%) 是最稳的居中方式，配合 position: absolute 或 fixed 及 top: 50%、left: 50%，可无视元素尺寸变化实现精准居中，且兼容滚动与响应式场景。
用 transform: translate(-50%, -50%) 是最稳的居中方式
绝对定位 + transform 组合能避开元素尺寸未知时负边距失效的问题。只要父容器设了 position: relative，子元素设 position: absolute; top: 50%; left: 50%，再加 transform: translate(-50%, -50%)，就能真正居中——不管模态框是固定宽高、max-width 还是内容流式撑开。
常见错误现象：margin-top: -100px 这类写死负边距，在响应式场景下直接偏移；或者忘了给父容器加 position: relative，导致子元素相对于 body 定位，一滚动就错位。
- 必须确保模态框父容器有
position: relative（或absolute/fixed） -
top: 50%和left: 50%是基于父容器计算，不是视口 - 如果模态框内部有
overflow: auto且内容超长，transform不影响滚动行为，安全
负边距只适合宽高完全固定的模态框
当模态框 width 和 height 都是确定值（比如 400px × 300px），可以用 margin-top: -150px; margin-left: -200px 配合 top: 50%; left: 50% 实现居中。但一旦引入 min-width、max-height 或媒体查询，负边距立刻失准。
使用场景：老项目兼容 IE9–10（不支持 transform 的早期版本），或极简静态弹窗。
- IE9 支持
transform，但需加-ms-transform前缀；IE8 及以下只能靠负边距 + JS 计算 - 若模态框用
rem或vh单位，负边距得同步换算，维护成本陡增 - Flexbox 虽然也能居中，但在
position: fixed模态框里容易和 body 滚动条冲突，不推荐混用
top: 50% 遇到滚动页面会偏移？那是没用 position: fixed
模态框常被误设为 position: absolute，结果页面一滚动，它就跟着父容器跑。正确做法是用 position: fixed，让定位基准变成视口，再配合 top: 50% 和 transform，滚动也不飘。
典型错误：position: absolute + top: 50%，父容器又恰好是 overflow: scroll 的区域，模态框实际按该区域顶部计算 50%，不是屏幕中间。
-
position: fixed时，top/left始终相对于视口，无需担心父级滚动容器 - 记得加
z-index，否则可能被其他fixed元素盖住 - 移动端 Safari 对
fixed+transform组合偶有渲染延迟，可加will-change: transform微调
别忽略 backdrop 和 focus 管理这些「隐形需求」
垂直居中只是视觉部分。真实模态框还要处理背景遮罩、键盘 Tab 键焦点限制、Esc 关闭、以及关闭后恢复焦点——这些不写 CSS，但不做就等于没做完。
容易被忽略的点：transform 居中本身不阻止背景滚动，得额外给 body 加 overflow: hidden；而焦点管理一漏，无障碍用户就卡在模态框外无法进入。
- 遮罩层用
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh，比100%更可靠 - 模态框打开时记录
document.activeElement，关闭后手动.focus()回去 - 用
inert属性（或 JS 模拟）禁用遮罩外所有可交互元素，比单纯改opacity更彻底
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
