left: 50%; top: 50%; transform: translate(-50%, -50%) 是最稳的绝对定位居中方案，兼容性好、无需预知尺寸、不触发重排；其中 transform 的百分比基于自身宽高，而 left/top 百分比基于父容器。
绝对定位元素水平垂直居中：left/top + transform 是最稳的方案
用 position: absolute 做居中，别碰 margin: auto（它在绝对定位下对宽高不定的元素无效），也别硬算 left: 50%; top: 50%; margin-left: -xxxpx（宽高一变就错）。left: 50%; top: 50%; transform: translate(-50%, -50%) 是目前兼容性好、无需预知尺寸、且不触发重排的通用解法。
为什么 transform(-50%, -50%) 能居中，而不是 left: -50%
transform: translate(-50%, -50%) 中的百分比是相对于元素自身宽高的，而 left: -50% 的百分比是相对于父容器宽度的——这点极易混淆。实际效果上：
-
left: 50%把元素左边缘移到父容器水平中点 -
transform: translate(-50%, -50%)再把元素自身向左、向上各挪动「自己宽高的一半」，于是中心点就对准了父容器中心 - 如果误写成
left: -50%，元素会往左偏移父容器宽度一半，完全跑偏
IE8 及更老浏览器不支持 transform 怎么办
IE8 及以下不支持 transform，但真要兼容，就得回归「已知宽高 + 负 margin」方案。前提是：元素宽高固定或可预测。
- 必须显式设置
width和height（比如width: 200px; height: 100px） - 再写
left: 50%; top: 50%; margin-left: -100px; margin-top: -50px - 注意：百分比
left/top和像素margin必须严格对应，差 1px 都会偏移 - 现代项目基本不用考虑，但若维护老系统，得确认是否真有 IE8 流量，别为幻觉加兼容
fixed 定位居中和 absolute 居中写法一样吗
一样。只要父容器不是 static（默认值），position: fixed 的参考系是视口，但居中逻辑不变：left: 50%; top: 50%; transform: translate(-50%, -50%) 照样生效。
- 区别只在定位上下文：
absolute相对于最近的非static祖先，fixed永远相对于视口 - 滚动时，
fixed元素不动，absolute会随父容器滚动（除非父容器也 fixed/sticky） - 不要试图用
right: 0; bottom: 0;配合transform居中——方向基准变了，计算会乱
真正容易被忽略的是 transform 的触发条件：它必须作用在已定位元素（position 不为 static）上才有效果；另外，如果父容器设置了 overflow: hidden 且子元素超出，translate 可能导致部分区域被裁剪——居中不是万能的，得看上下文是否允许溢出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
