用 position: absolute 配合 transform: translate(-50%, -50%) 可实现未知宽高的元素居中；因 top/left: 50% 仅移左上角至父中心，需 translate 抵消偏移，且父需 relative 定位、子需 absolute 定位。
直接用 position: absolute 配合 transform: translate(-50%, -50%) 就能解决，不需要知道元素宽高，也不用 JS 测量。
为什么不能只靠 top: 50% 和 left: 50%
因为 top: 50% 和 left: 50% 是把元素的左上角移到父容器中心点，而不是把元素自身中心对齐。结果是元素整体偏右下——看起来“没居中”。
常见错误现象：元素右下角刚好卡在父容器中心，文字或图标明显靠右靠下。
关键点：transform: translate() 的百分比是相对于元素自身宽高计算的，而 margin 或 top/left 的百分比是相对于父容器的，这是根本区别。
transform: translate(-50%, -50%) 的实际作用
它把元素向左移动自身宽度的 50%，再向上移动自身高度的 50%，正好抵消掉左上角定位带来的偏移。
使用场景包括弹窗、加载指示器、提示气泡等尺寸动态变化的组件。
必须满足两个前提：
- 父容器设为
position: relative（或absolute/fixed），否则absolute子元素会相对于 viewport 定位 - 子元素必须有
position: absolute，且同时设置top: 50%和left: 50%
示例代码：
.parent {
position: relative;
height: 400px;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
IE9+ 兼容性与 fallback 考量
transform 在 IE9+ 支持，但需要加前缀才能覆盖 IE9/10：-ms-transform。
如果项目仍需支持 IE8，这个方案不可用，得换 display: table-cell 或 JS 计算 margin。
性能影响极小，现代浏览器对 transform 有硬件加速优化，比频繁读取 offsetWidth 更轻量。
容易被忽略的一点：如果父容器本身没有明确高度（比如仅靠内容撑开），top: 50% 会失效——此时要确保父容器有可计算的高度来源，例如 min-height 或固定 height。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
