用 position: absolute 配合 top: 50%、left: 50% 和 transform: translate(-50%, -50%) 可实现未知宽高的居中，但父容器必须设 position: relative（或 absolute/fixed），且需避免 transform 等创建新定位上下文的属性干扰，fixed 定位时参照视口，仍需 transform 补正。
直接用 position: absolute 配合 top: 50%、left: 50% 和 transform: translate(-50%, -50%) 就能实现，无需知道子元素宽高，也不依赖 JS 测量。
父容器必须设 position: relative
这是最容易漏掉也最致命的一环。如果父容器是默认的 position: static，子元素的 absolute 会一直向上查找，最终相对于 body 或视口定位——结果就是弹窗飞到页面左上角外侧，而不是你期望的“在父盒子里居中”。
- 必须显式给父容器加
position: relative（或absolute/fixed） - 避免父级有
transform、filter、will-change等属性，它们会创建新的定位上下文，干扰top/left: 50%的计算基准 - 如果弹窗直接挂载在
body下，确保body没有非static定位声明，否则也会偏移
transform: translate(-50%, -50%) 不能省略
只写 top: 50% 和 left: 50%，只会把元素左上角移到父容器中心点，整个元素实际是右下偏移的。漏掉 transform 是调试时最常遇到的“看起来差不多但就是不对”的原因。
-
translate(-50%, -50%)中的百分比是相对于元素自身宽高，不是父容器——这点和top/left完全不同，极易混淆 - 拼写错误如
transfrom或漏掉括号会导致完全失效，建议复制粘贴确认 - IE11 对 inline 元素（比如未设
display的<img>）支持不稳定，可加display: block或inline-block保底
用 position: fixed 还是 absolute？
取决于是否要随滚动消失。如果弹窗需要固定在视口中央（比如模态框），必须用 position: fixed；否则滚动后它会跟着父容器一起移出视野。
-
position: fixed时，top: 50%和left: 50%是相对于视口，不再依赖父容器定位上下文 - 仍需
transform: translate(-50%, -50%)补正，逻辑不变 - 记得加足够高的
z-index，避免被其他层遮挡
真正复杂的地方在于定位上下文的嵌套链和隐式创建——比如父容器加了 transform: scale(1)，表面没变化，却悄悄新建了包含块，导致 absolute 子元素的 top/left 参照系突变。这种问题不会报错，只会在特定缩放或动画状态下才暴露，调试时得一层层检查祖先节点的 CSS 声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
