最稳的弹窗居中方式是 position: fixed + transform: translate(-50%, -50%)，因 top: 50%; left: 50% 仅定位左上角，需 transform 拉回自身宽高一半才能精准居中，且不受内容动态变化、border 或 shadow 影响。
弹窗居中最稳的方式是用 position: fixed + transform: translate(-50%, -50%)，不是靠猜 margin 或手动算像素。
为什么不能只写 top: 50%; left: 50%
只设 top: 50% 和 left: 50%，会让弹窗左上角落在视口中心，结果整个弹窗偏右下——看起来像“飘在角落”。必须配 transform: translate(-50%, -50%) 把自身宽高的一半拉回来，才能让中心点对齐视口中心。
- 漏掉
transform是新手最常踩的坑，调试时肉眼难察觉偏移量，但就是“差那么一点” -
translate()的百分比基准是元素自身尺寸，不是父容器，所以内容动态撑开（比如异步加载后高度变大）也不会影响居中逻辑 - 如果弹窗用了
border或box-shadow，不影响计算，因为transform作用于整个渲染盒
fixed 定位 vs absolute 定位的区别
用 position: fixed 是首选，它直接相对于视口定位，滚动页面也不跑；而 position: absolute 会向上找最近的 position: relative 或 position: absolute 父容器，一旦嵌套层级深或父容器有定位，就容易错位。
- 若必须用
absolute，得确保父容器显式设了position: relative或position: fixed，否则基准可能是body或html，不可控 -
fixed下无需管父容器，z-index也更容易统一管理（建议设z-index: 1000以上） - iOS Safari 键盘弹出时，
visualViewport高度变化，fixed+transform仍按原始视口算，可能导致视觉上浮——这时得监听resize或keyboardWillShow微调
遮罩层要不要一起居中？
遮罩层（backdrop）本身不需要居中，它应该覆盖整个视口：position: fixed; top: 0; left: 0; width: 100%; height: 100% 即可。弹窗内容放在遮罩层内部，再单独居中。
- 别把遮罩层和弹窗都设成
flex容器——虽然能居中，但一旦遮罩层内还有其他元素（比如关闭按钮、加载状态），布局容易失控 - 遮罩层加
background-color: rgba(0, 0, 0, 0.5)，注意别用opacity，否则子元素也会变透明 - 打开弹窗时记得给
body加overflow: hidden，防止背后滚动；关闭时要还原
真正麻烦的不是写法，而是弹窗内容高度动态变化后，视觉上“上浮”却没重绘——这时候 transform 不会自动响应，得手动触发重排（比如临时改 display 或加个 class 强制重绘），或者换 grid + place-items: center 备选。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
