top: 50%将元素左上角移至父容器垂直中线，left: 50%将其左上角移至水平中线，transform: translate(-50%, -50%)再以自身宽高为基准反向偏移一半，使视觉中心精准对齐父容器中心。
因为 top: 50% 移动的是元素左上角，不是中心点；必须配合 transform: translate(-50%, -50%) 才能真正居中。
top: 50% 到底做了什么
它把元素的定位起点（对 position: absolute 元素来说，默认是左上角）拉到父容器垂直方向的 50% 处。这个“50%”是相对于父容器高度计算的，但元素自身尺寸完全没被考虑进去。
- 如果元素高 120px，
top: 50%后它的顶部在父容器正中，底部就在中线 + 120px 的位置——显然偏下了 - 即使同时写了
left: 50%，也只是把左上角钉在父容器中心，整体仍向右下“悬垂” -
getBoundingClientRect().top返回值 ≈ 父容器高度的一半，但这只是上边缘的位置，不是视觉中心
为什么 transform: translate(-50%, -50%) 是必需的
这行代码不是微调，而是关键补救：它以元素自身宽高为基准，向左、向上各挪动自己尺寸的 50%。
-
translate(-50%, -50%)中的 -50% 指的是该元素当前width和height的 50%，和父容器无关 - 顺序不能错：必须
top: 50%和left: 50%在前，transform在后；否则transform先偏移，再被top/left拉走，结果错乱 - 如果元素有其他
transform（比如scale(0.9)），要合并写成transform: translate(-50%, -50%) scale(0.9)，否则后者会覆盖前者
常见失效原因：父容器或元素本身出了问题
很多人调了十分钟发现还是偏，问题往往不在 transform 本身，而在上下文环境。
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
position: relative（或absolute/fixed），导致top: 50%相对于body或视口计算 - 父容器有
transform、filter或will-change，会创建新的包含块（containing block），改变top: 50%的参考系 - 子元素是
img或内联元素，默认vertical-align: baseline，底部留白；建议加vertical-align: top或display: block - IE9 需要
-ms-transform: translate(-50%, -50%)，且元素得是块级（display: block）才生效
真正容易被忽略的是：transform: translate(-50%, -50%) 虽然可靠，但它依赖浏览器能正确计算出元素渲染后的宽高——如果元素内部有未加载的图片、异步插入的内容、或受 white-space: normal 影响的换行文本，首次渲染时尺寸可能不准，造成短暂偏移。
