绝对定位居中需父容器设position: relative，子元素用top: 50%、left: 50%将左上角移至中心，再通过transform: translate(-50%, -50%)反向平移自身宽高一半，实现视觉中心对齐；仅top/left 50%会导致元素整体偏右下。
绝对定位居中不是“设个 top: 50% 就完事”，它依赖父容器的定位上下文，且子元素脱离文档流后必须手动“拉回”中心——否则只会卡在左上角。
为什么 top: 50% + left: 50% 不居中？
因为 top: 50% 是把元素**左上角**移到父容器垂直方向 50% 的位置，left: 50% 同理。结果是元素左上角在中心，整体却偏右下。
- 父容器没设
position: relative→ 子元素会相对于 viewport（整个浏览器窗口）定位，而不是你期望的盒子 - 没做后续偏移 → 元素只是“锚点”到了中心，自身宽高没参与对齐
- 子元素没设宽高 →
margin负值或transform无法准确计算基准
transform: translate(-50%, -50%) 是最稳的写法
它不依赖子元素具体像素尺寸，百分比始终按自身宽高算，适合内容动态、宽高未知的场景。
- 必须配合
position: absolute和父级position: relative -
translate(-50%, -50%)把元素向左、向上各移动自己宽高的 50%，刚好把中心点“挪”到锚点位置 - 即使子元素里有
font-size变化、文字换行、图片加载，也不影响居中逻辑 - 注意：如果子元素本身已有
transform（比如旋转），要合并写，如transform: translate(-50%, -50%) rotate(5deg)，否则后写的会覆盖前写的
margin: auto 配四边定位，但限制多
这种写法靠浏览器自动计算 margin 实现居中，不用 transform，某些老安卓 WebView 更兼容，但条件苛刻。
- 子元素必须有明确的
width和height，否则margin: auto在绝对定位下无效 - 父容器需设
position: relative（或其它非 static 定位） - 必须同时设
top: 0; right: 0; bottom: 0; left: 0，缺一不可——这是触发margin: auto居中的前提 - IE8 及更早版本不支持该用法
新手最容易漏掉的三件事
不是代码写错，而是上下文没配齐。
- 父容器忘了加
position: relative→ 子元素飞出预期区域，调试时检查 computed styles 里的 “offset parent” 是谁 - 子元素没设宽高，却用负
margin→ 比如margin-top: -50px，但实际高度是 32px，结果偏上太多 - 用 Flex 布局时顺手写了
align-items: center，但父容器高度是auto→ 内容撑多高就多高，视觉上根本没“垂直”可言，得补height或min-height
真正麻烦的从来不是怎么写那一行居中代码，而是搞清它在哪一级生效、被谁约束、受什么干扰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
