absolute + margin: auto 居中依赖于绝对定位元素在 top/bottom/left/right 均为 0 且宽高固定时，浏览器将剩余空间均分给 margin 的特殊行为；需父容器有非 static 定位及明确高度。
absolute + margin: auto 为什么能居中？
它依赖的是 margin: auto 在**已知宽高的绝对定位元素**上触发的特殊行为：浏览器会把剩余空间均分给左右/上下 margin，从而实现居中。但这个“自动计算”只在 position: absolute 且 top/bottom/left/right 都设为 0 时才生效。
常见错误现象：margin: auto 没反应、元素卡在左上角、或只水平居中但不垂直。
- 必须同时设置
top: 0、bottom: 0、left: 0、right: 0 - 元素必须有明确的
width和height（不能是auto或依赖内容） - 父容器需有定位上下文（即
position不是static，通常设为relative）
实际写法和最小必要代码
这是能跑通的最简结构，去掉任何一项都可能失效：
.container {
position: relative;
height: 300px; /* 父容器要有高度 */
}
.centered {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 200px;
height: 100px;
margin: auto;
}
注意：margin: auto 在这里等价于 margin: auto auto，不是 margin: 0 auto —— 后者只管水平，对垂直无效。
和 transform 居中比，有什么坑？
这个方案看似简洁，但兼容性和灵活性不如 transform: translate(-50%, -50%)：
- IE8+ 支持，但 IE7 及更早版本不支持
margin: auto在绝对定位中的这种用法 - 无法用于宽高未知的元素（比如文字块、图片未设尺寸）
- 如果元素使用了
min-width/max-height，且实际尺寸被限制，margin: auto仍按设定值计算，可能导致错位 - Flex/Grid 出来之后，它基本只适合老项目兼容或极简 demo，新项目优先考虑
display: flex
什么时候真该用它？
场景很窄，但确实存在：
- 需要兼容 IE8–IE9 的遗留系统（
flex不可用，transform在 IE9 下需加前缀且有渲染 bug） - 元素尺寸固定、父容器高度可控，且不想引入额外布局层（比如避免嵌套
flex容器） - 做 CSS 动画时，
margin: auto的居中位置是静态计算的，不会像transform那样在动画中重排，性能略稳（但差别微乎其微）
真正容易被忽略的是：它对父容器的 height 敏感——如果父容器高度由内容撑开，而你又没设 min-height，那在内容少时，bottom: 0 可能压根没意义，居中就失效了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
