只写 transform: translate(-50%, -50%) 无法居中，因为 transform 不改变文档流位置，必须配合 top: 50% 和 left: 50% 将元素左上角移至父容器中心，再用 translate 回退自身宽高一半才能真正居中。
为什么只写 transform: translate(-50%, -50%) 不居中？
因为 transform 本身不改变元素在文档流中的位置，它只是对已渲染的元素做视觉偏移。如果没配合 top: 50% 和 left: 50%，元素仍在默认位置（比如左上角），translate(-50%, -50%) 只是让它原地向左上各挪自身宽高的一半——结果还是贴着左上角，根本没靠近中心。
必须先用绝对定位把左上角“拉到”父容器中心点，再靠 translate “往回退一半”。漏掉任一环，视觉上都会明显偏右下。
-
top: 50%是基于父容器高度计算的百分比 -
translate(-50%, -50%)的百分比是基于元素自身宽高实时计算的，无需知道具体像素值 - 父容器必须有
position: relative（或absolute/fixed），否则top/left会相对于视口，导致滚动时“飘走”
translate() 的参数到底是相对谁算的？
translate(x, y) 中的百分比值，永远以元素自身的 width 和 height 为基准——不是父容器，也不是视口。这意味着：
-
translate(50%, 0)→ 向右平移自己宽度的一半 -
translate(0, -100%)→ 向上平移自己高度的全部 - 即使元素宽高由内容撑开、或受
max-width限制，浏览器也会在渲染时动态取当前尺寸计算 - 对
inline元素也生效，但要注意其width/height可能为0，导致偏移不可见
合并多个 transform 函数时顺序为什么重要？
CSS 的 transform 声明是覆盖式而非叠加式：后写的整条 transform 会完全替换前一条。所以不能这样写：
element { transform: translate(-50%, -50%); }
element:hover { transform: rotate(45deg); }
hover 时旋转会把居中偏移直接干掉。正确做法是把所有变换写进同一个声明里：
- 推荐把
translate放最后：transform: scale(1.2) rotate(45deg) translate(-50%, -50%)（先缩放/旋转，再居中） - 如果先平移再旋转，旋转中心会变成偏移后的位置，可能造成意料外的轨道偏移
- 动画中频繁切换
transform值时，建议加will-change: transform提前提示渲染引擎，但别滥用在非动画元素上
哪些情况会让 translate(-50%, -50%) 看起来“差1px”？
这不是写法错，而是浏览器渲染机制导致的亚像素问题：
- 当父容器高度或元素自身尺寸算出小数像素（比如
height: 101px→50%=50.5px），不同浏览器对 .5px 的舍入策略不同 - GPU 加速合成时坐标对齐策略可能引入 1px 抖动，尤其在高 DPR 屏幕（如 Retina）上更明显
- 父容器用了
transform-style: preserve-3d或嵌套了缩放，可能干扰子元素的坐标系精度
真要像素级对齐，且元素尺寸固定，可改用 calc()：top: calc(50% - 50px); left: calc(50% - 50px);（假设宽高都是 100px）。但这就失去响应式优势，慎用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
