绝对定位加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 更简洁：
-
justify-content: center; align-items: center一行搞定，无需关心宽高是否固定 - 但 flex 要求父容器是 flex 容器，可能影响原有布局流；而
absolute是脱离文档流的，适合模态框、提示气泡等覆盖层场景 - IE10+ 支持
transform: translate()，flex 则在 IE10/11 中有部分兼容问题（比如align-items对min-height不生效）
容易忽略的细节：z-index 和 pointer-events
使用 position: absolute 后，元素层级默认提升，但若和其他绝对定位元素重叠，需显式设置 z-index。另外，如果居中的是遮罩层或空容器，记得检查是否意外拦截了点击事件：
立即学习“前端免费学习笔记（深入）”；
- 遮罩层需要交互 → 保留默认
pointer-events: auto - 纯视觉居中元素（如背景装饰块）且不想挡点击 → 加
pointer-events: none - 父容器设置了
overflow: hidden，而子元素absolute后超出部分被裁剪 → 需确认是否符合设计预期
transform 的像素级回拉比用负 margin 更稳定，尤其在缩放或高清屏下。 
