绝对定位元素用 margin: auto 居中必须同时满足三个条件：父容器有定位上下文（position: relative/absolute/fixed）、子元素宽高明确固定、top/right/bottom/left 全设为 0；缺一则失效，元素将贴左上角。
绝对定位元素用 margin: auto 居中要满足什么条件？
必须同时满足三个硬性条件：position: absolute、父容器 position: relative（或 absolute/fixed）、子元素明确设置 width 和 height，且 top/right/bottom/left 全设为 0。
常见错误是只写 margin: auto 却漏掉四边偏移，或者父容器没设定位上下文，结果元素跑到视口左上角；更隐蔽的问题是子元素宽高为 auto 或继承自内容，此时 margin: auto 会失效，浏览器无法计算剩余空间。
示例写法：
.parent { position: relative; }
.child { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 100px; height: 60px; }
已知宽高的绝对定位元素，用 margin 负值居中怎么写？
这是兼容性最好、逻辑最直白的方式，但前提是宽高固定可测。
核心思路：先用 top: 50% 和 left: 50% 把元素左上角挪到父容器中心，再用负外边距把自身“拉回”一半尺寸。
-
margin-top设为-height/2 -
margin-left设为-width/2 - 注意单位必须一致（比如都是
px），不能混用rem和px
例如一个 80px × 60px 的盒子：
.child { position: absolute; top: 50%; left: 50%; margin-top: -30px; margin-left: -40px; }
宽高不确定时，为什么优先选 transform: translate(-50%, -50%)？
因为不依赖具体数值，也不要求提前知道尺寸，纯靠渲染后坐标位移修正位置，适合图标、提示框、加载动画等动态内容。
关键点：
- 必须搭配
top: 50%和left: 50%使用，单独写transform没效果 -
translate的百分比是相对于元素自身宽高，不是父容器 - IE9+ 支持，但 IE9 需加
-ms-前缀；移动端无兼容问题
写法简洁：
.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
inset 居中在现代浏览器里怎么用？
这是 CSS Logical Properties 提供的新方案，Chrome 102+、Firefox 103+、Safari 16.4+ 支持，写法极简但容易忽略前提。
它本质是 top/right/bottom/left 的合并 shorthand，但只有配合 margin: auto 才能触发居中逻辑：
.child { position: absolute; inset: 0; margin: auto; width: 120px; height: 80px; }
注意：inset: 0 等价于 top: 0; right: 0; bottom: 0; left: 0，但如果不写 margin: auto，元素会被拉伸填满整个父容器——这点和老式写法行为完全不同，极易踩坑。
真正灵活的场景其实很少：既要现代浏览器，又要定宽高，又不想写四行偏移。多数情况下，transform 方案更稳妥。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
