绝对定位加transform居中是最常用可靠的固定宽高元素居中方式：父容器设position: relative，子元素设position: absolute、top: 50%、left: 50%再用transform: translate(-50%, -50%)回拉自身宽高一半。
用 position: absolute + transform: translate(-50%, -50%) 居中固定宽高的元素
这是最常用也最可靠的居中方式，适用于已知宽高（如 width: 200px; height: 100px）的元素。关键在于：父容器必须有定位上下文（即 position 值为 relative、absolute 或 fixed），否则 absolute 会相对于视口定位，容易偏移。
- 父容器加
position: relative是最稳妥的做法 - 子元素设
position: absolute，再用top: 50%; left: 50%把左上角移到父容器中心 - 最后用
transform: translate(-50%, -50%)将自身回拉一半宽高，实现真正居中
.container {
position: relative;
width: 400px;
height: 300px;
border: 1px solid #ccc;
}
.centered-box {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 100px;
background: #4a90e2;
transform: translate(-50%, -50%);
}
为什么不能只靠 top: 50% 和 left: 50%？
因为 top: 50% 是把元素的**上边界**移到父容器垂直方向 50% 的位置，left: 50% 同理是把**左边界**移到水平 50% 处——结果是元素左上角在中心，整体向右下偏移。不加 transform 回拉，就只是“顶点居中”，不是“元素居中”。
- 常见错误：漏掉
transform，或写成translateX(-50%) translateY(-50%)（语法正确但冗余，translate()两个参数已足够） - 注意：
transform中的百分比是相对于元素自身宽高计算的，不是父容器 - 如果元素宽高是动态的（比如用
max-width或fit-content），这个方法依然有效——只要渲染时尺寸确定，translate就能正确回拉
替代方案对比：flex 居中 vs absolute + transform
如果你能控制父容器样式，display: flex 更简洁：
