absolute + transform 居中是最稳的方案：用 position: absolute 配合 top: 50%、left: 50% 和 transform: translate(-50%, -50%)，无需知道宽高，兼容 ie9+，但父元素必须设非 static 定位。
absolute + transform 居中是最稳的方案
用 position: absolute 居中未知宽高的元素，别碰 top: 50%; left: 50% 加负 margin 的老办法——你根本不知道宽高，没法算 margin。直接上 transform: translate(-50%, -50%)，浏览器自己算偏移，兼容性到 IE9+，没副作用。
常见错误是忘了给父容器加 position: relative（或 absolute/fixed），导致子元素相对于 viewport 定位，飘到屏幕左上角外。
- 父元素必须有定位上下文（
position值不能是static） -
top: 50%; left: 50%是把元素左上角挪到父容器中心 -
transform: translate(-50%, -50%)是把自己向左、向上各回退自身宽高的一半 - 不需要知道宽高，也不依赖
display: inline-block或其他 hack
flex 替代方案更简单，但要注意场景
如果只是居中一个子元素，且父容器可以改布局方式，display: flex + justify-content/align-items 一行搞定，代码更干净，语义也更准。但它会改变父容器的布局流，可能影响兄弟元素。
典型误用：在已有复杂浮动或 inline-block 布局的父容器里硬加 flex，结果整个排版错乱。
- 父容器加
display: flex; justify-content: center; align-items: center; - 子元素无需任何定位或 transform
- 不支持 IE9 及以下（IE10 需要
-ms-前缀） - 若父容器已有
float、inline-block或绝对定位子元素，需评估是否破坏现有结构
absolute + 四边全设 0 + margin: auto 为什么不行
有人试过 top: 0; right: 0; bottom: 0; left: 0 再加 margin: auto，期望自动居中。这招对 width/height 固定的块级元素有效，但对宽高完全由内容撑开（比如空 div、纯文字、图片未设尺寸）的元素，margin: auto 在 absolute 下不触发居中逻辑——浏览器无法计算可用空间，最终表现为元素贴左上角或按默认流排列。
- 该方法要求元素有明确的
width和height（哪怕用max-width也不行） - 对
display: inline、display: contents或无尺寸的伪元素无效 - 在 Firefox 和 Safari 中行为更不稳定，不建议用于未知尺寸场景
实际写法示例和关键注释
.parent {
position: relative; /* 必须！否则 absolute 子元素找不见参照 */
width: 300px;
height: 200px;
border: 1px solid #ccc;
}
<p>.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/<em> 不需要 width/height，也不需要 margin </em>/
}
</p>
注意：如果 .child 是图片，且希望它等比缩放并居中（比如响应式头图），那就不是 absolute 能单独解决的了——得配合 max-width: 100%、height: auto 和 object-fit，那是另一个问题域。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
