绝对定位居中必须父容器设position: relative，否则top:50%和left:50%会相对于视口而非父容器；仅设top/left仅移动左上角至中心，须加transform: translate(-50%, -50%)使几何中心对齐。
transform 配合 position: absolute 更稳，但前提是父容器必须设 position: relative——漏掉这一步，再“稳”的写法也会失效。
为什么只写 top: 50% 和 left: 50% 不行
这只是把元素左上角挪到父容器中心点，结果是整个元素偏右下。常见错误现象：弹窗右上角卡在屏幕中央、文字顶部对齐中线但下半截悬空。必须补上 transform: translate(-50%, -50%) 才能真正让几何中心对齐。
position: relative 是硬性前提，不是可选项
因为 position: absolute 的定位参考系是「最近的已定位祖先」。默认 position: static 不算已定位，浏览器会一路往上找，最终落到 body 或视口上。所以：
- 父容器哪怕只是个空
<div>，也得加position: relative - 如果父容器本身用了
display: flex或grid，依然要加——布局方式不等于定位上下文 - 嵌套弹窗场景中，中间某层漏了
position: relative，深层子元素就会漂移
transform: translate(-50%, -50%) 的百分比怎么算
它按元素**当前渲染后的宽高**计算，不是父容器尺寸，也不是初始 CSS 声明值。这意味着：
- 文字换行、图片加载、字体缩放、
em/rem动态变化，都不影响居中效果 - 如果子元素是
inline（比如<span>），IE11 下需先加display: inline-block或block - 不要和父级
transform（如scale()、rotate()）混用，否则会叠加导致偏移
别碰 top: 0; bottom: 0; left: 0; right: 0; margin: auto 这套
它在绝对定位下行为不可靠：
立即学习“前端免费学习笔记（深入）”；
- 只有当子元素有明确
width和height（不能是auto）时才可能生效 - 多行文字、SVG、未设宽高的图片、
fit-content布局，全都会撑满父容器或错位 - 垂直方向上，多数浏览器根本不响应
margin: auto，调试时很难定位问题根源
transform 或 overflow: hidden，就可能悄悄改变「包含块」，让 absolute 的参照系切换——而 translate(-50%, -50%) 还在按原逻辑算，结果就偏了。 
