不能只用top: 50%和left: 50%是因为它们移动元素左上角而非中心，导致偏右下；需配合transform(-50%,-50%)、负margin或margin: auto（要求父relative、子定宽高且四边定位为0）来修正偏移。
为什么不能只用 top: 50% 和 left: 50%
因为这两个值移动的是元素的左上角，不是中心点。比如一个宽高各 200px 的盒子，top: 50% 把它顶部挪到父容器中间，left: 50% 把它左边挪到父容器中间——结果是整个盒子右下角落在父容器中心，明显偏右下。真正居中需要“把左上角拉回来一半自身尺寸”，而不用 transform 就得靠其他方式补这个偏移。
position: absolute + margin: auto 怎么用
这是最接近“零计算”的替代方案，但有硬性前提：
- 父容器必须设
position: relative（或其它非static值） - 子元素必须有明确的
width和height - 子元素要同时设置
top: 0、bottom: 0、left: 0、right: 0
浏览器会把 margin: auto 解释为：在四个方向都有定位约束的前提下，自动均分剩余空间——于是元素就被挤到正中心。示例：
.parent { position: relative; width: 300px; height: 200px; }
.child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100px; height: 60px; margin: auto; }
常见错误：漏掉任意一个方位值（比如只写 top 和 left），margin: auto 就失效；或者子元素没设宽高，它会撑满，自然没法居中。
立即学习“前端免费学习笔记（深入）”；
已知宽高的情况下用负 margin
如果子元素尺寸固定且你愿意手动算，这是兼容性最好的方案（IE8+ 都支持）：
-
top: 50%后，再用margin-top: -Xpx把它往上拉一半高度 -
left: 50%后，再用margin-left: -Ypx往左拉一半宽度 - 注意：负 margin 的单位必须是
px（或其他绝对单位），不能用百分比——因为这里的百分比是相对于父容器的，不是自身
例如一个 width: 120px、height: 80px 的元素：
.child { position: absolute; top: 50%; left: 50%; margin-top: -40px; margin-left: -60px; }
容易踩的坑：宽高动态变化时，这套完全不可维护；另外，如果父容器没有 position: relative，定位会相对于 body，导致居中错位。
老项目兼容 IE8 的备选：display: table-cell
这招不依赖定位，但结构约束强：
- 父容器要设
display: table，且必须有明确宽高 - 中间加一层
display: table-cell的 wrapper，并设vertical-align: middle和text-align: center - 目标元素设为
display: inline-block或行内元素
缺点很明显：整个父容器变成表格渲染模式，float、margin、position 等很多布局属性会失效，现代项目基本不用。
真正麻烦的地方不在写法本身，而在判断：你到底需不需要支持 IE8？如果只是担心旧版 WebView 或某些嵌入式环境，加个 -webkit-transform 前缀往往比换整套方案更实际。否则，margin: auto 方案已经够用，前提是宽高可控。
