绝对定位居中需父容器设position: relative，否则元素相对于body居中；top/left仅移动左上角，须配合transform: translate(-50%,-50%)实现真正居中；多变换须合并至单条transform声明。
父容器没设 position: relative，居中就失效
绝对定位元素的 top、left 等值，永远是相对于“最近的已定位祖先”计算的。如果父容器是默认的 position: static（也就是没写任何 position），浏览器会一路往上找，最终落到 body 或视口上——结果就是元素在整页中心，而不是你写的那个 div 里。
必须显式给父容器加 position: relative（absolute 或 fixed 也行，但 relative 最安全，不改变文档流）。
- 错误写法：
.parent { }+.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } - 正确写法：
.parent { position: relative; }，再加子元素样式 - 别依赖
body作参考——它可能被重置样式影响（比如缺失margin: 0导致额外偏移）
top: 50% 和 left: 50% 只动左上角，不是居中
top: 50% 和 left: 50% 的作用，是把元素的**左上角**（border-box 原点）拉到父容器中心点。这不是“让元素居中”，而是“让锚点落在中心”。漏掉后续校正，你会看到元素整体偏右下，甚至右下角飘出容器。
必须配 transform: translate(-50%, -50%)，原理是：先用 top/left 把左上角钉在中心，再用 translate 向左上各挪自身宽高的一半——这个“自身”由浏览器实时计算，无需手动填像素值。
立即学习“前端免费学习笔记（深入）”；
- 只写
top: 50%; left: 50%→ 左上角在中心，视觉错位 - 写了
transform: translate(-50%, -50%)→ 中心点对齐中心点 - 只想水平居中？可用
transform: translateX(-50%)，省去垂直计算
多个 transform 声明会覆盖，必须合并写
如果元素后续要加旋转、缩放等动画，直接写 transform: rotate(10deg) 会完全覆盖前面的 translate，导致居中崩掉。
所有变换必须写进同一个 transform 声明里。顺序会影响最终效果（平移建议放最后）：
- 错误：
transform: translate(-50%, -50%);→ 后续又写transform: rotate(45deg); - 正确：
transform: rotate(45deg) translate(-50%, -50%);或transform: translate(-50%, -50%) rotate(45deg);（后者更直观） - 不要写成两行
transform，CSS 只取最后一条声明
margin: auto 居中只适用于宽高固定的元素
写法是：position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;。浏览器会自动把剩余空间均分到上下左右 margin 中，从而实现居中。
但它有个硬性前提：子元素必须有明确的 width 和 height（不能是 auto 或百分比，除非父容器尺寸也固定）。
- 适合模态框、加载提示层等尺寸可控的场景
- 不适合文字内容、图片等动态尺寸元素
- 如果宽高不确定，优先选
transform方案
transform（比如缩放或旋转），通常不影响子元素定位参考系；但若用了 transform-style: preserve-3d，可能改变层叠上下文，得实测。 
