绝对定位元素用 top: 50% + left: 50% 未居中是因为其左上角对齐父容器中心；需配合 transform: translate(-50%, -50%) 才能真正居中，且父容器须设 position: relative 等非 static 值。
绝对定位元素用 top: 50% + left: 50% 为什么没居中？
因为 top: 50% 和 left: 50% 是把元素的**左上角**移到父容器中心点，不是把元素本身居中。视觉上它偏右下，尤其宽高不固定时更明显。
常见错误现象：div 看起来“飘在右下方”，调试时发现 getBoundingClientRect() 返回的 left/top 值远大于预期。
- 必须配合偏移修正：要么用负
margin（需已知宽高），要么用transform: translate(-50%, -50%) -
margin方案只适用于宽高固定的元素；transform方案兼容性更好（IE9+），且支持响应式尺寸 - 若父容器未设置
position: relative或其他非static值，绝对定位会相对于 viewport 居中，而非你预期的父块
用 transform: translate(-50%, -50%) 居中的实际写法
这是目前最稳妥、最常用的方案，不需要提前知道元素尺寸，也适配 flex/grid 容器内的绝对定位子元素。
典型写法：
立即学习“前端免费学习笔记（深入）”；
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}- 注意顺序：必须
top/left在前，transform在后；否则transform会影响参考系 - 不要写成
translateX(-50%) translateY(-50%)—— 虽然等效，但多写了 12 字符，无必要 - 如果元素有
scale()或其他transform，要合并写：例如transform: translate(-50%, -50%) scale(0.9)，否则后者会覆盖前者
负 margin 居中只在什么情况下能用？
仅当元素宽高完全确定（CSS 中写死 width/height，或由图片/内联内容撑开且不会变）时才可靠。
示例（固定 200×100 的弹窗）：
dialog {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 100px;
margin-top: -50px; /* height / 2 */
margin-left: -100px; /* width / 2 */
}- 一旦内容动态变化导致宽高改变（比如文字换行、font-size 响应式调整），
margin就失效 - 使用 CSS 自定义属性（
--w,--h）配合calc()也无法规避运行时不可知的问题，不推荐 - 在 CSS-in-JS 或某些 SSR 场景下，服务端无法预知最终渲染尺寸，负
margin更容易出错
移动端或缩放页面里 transform 居中会模糊吗？
会，尤其在非整数像素位移时（比如 translate(-50.3px, -50.3px)），浏览器可能启用亚像素渲染，导致边缘发虚。
- 这不是 bug，是渲染引擎权衡清晰度与动画平滑性的结果
- 若对清晰度敏感（如图标、文字遮罩），可加
will-change: transform或backface-visibility: hidden强制 GPU 渲染，缓解部分模糊 - 真正要杜绝模糊，得放弃百分比位移，改用 JS 计算精确整数偏移（但失去 CSS 原生性能和声明式优势，一般不值得）
居中看似简单，但“绝对定位 + 百分比回调”这个组合，最容易被忽略的是父容器的定位上下文是否生效，以及 transform 是否被其他样式意外覆盖——这两处出问题，连最基础的居中都会失效。
