只写 top: 50% 和 left: 50% 不行，因为仅将元素左上角移至父容器中心，需配合 transform: translate(-50%, -50%) 将元素自身宽高一半反向偏移才能真正居中；父容器必须设 position: relative 提供定位上下文，且后续 transform 动作须合并而非覆盖。
为什么只写 top: 50% 和 left: 50% 不行
因为这两个值只是把元素的左上角移到父容器中心点，不是让元素“自己居中”。你会看到元素整体偏右下——这不是 bug，是定位逻辑本来如此。元素中心还在右下方，视觉上明显错位。
transform: translate(-50%, -50%) 是必须加的校正步骤
它把元素自身向左、向上各挪动「自己宽高的一半」，从而让中心点对准父容器中心。关键点：
-
translate()的百分比基于元素自身尺寸，不依赖父容器宽高，也不需要预知元素具体像素值 - 必须和
top: 50%、left: 50%配合使用，缺一不可 - IE9+ 支持，现代项目基本无兼容问题；若真要支持 IE8，得退回到固定宽高 + 负
margin方案
父容器必须有已定位上下文（通常是 position: relative）
否则 top/left 会相对于视口或更上层定位祖先计算，导致元素跑到整页中心，而不是你写的那个盒子里面。
- 错误写法：
.parent { }（空样式） → 子元素居中失效 - 正确写法：
.parent { position: relative; }（哪怕不需要偏移也得显式声明） -
position: absolute、fixed、sticky也能提供定位上下文，但relative最安全，不影响文档流
动画或后续变换时别覆盖 translate 居中逻辑
如果之后要加旋转、缩放等效果，直接写新 transform 声明会完全覆盖之前的 translate(-50%, -50%)，居中立刻崩掉。
立即学习“前端免费学习笔记（深入）”；
- 错误：
transform: translate(-50%, -50%);然后又写transform: rotate(45deg); - 正确：合并成一条，例如
transform: rotate(45deg) translate(-50%, -50%);或transform: translate(-50%, -50%) rotate(45deg);（后者更符合直觉） - 用 JS 动态改
transform时，也要注意字符串拼接，别漏掉居中偏移
.element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
容易被忽略的是：父容器没设 position: relative，或者动画里单独覆盖了 transform —— 这两个坑比写错数值还常见。 
