因为left: 50%和top: 50%将元素左上角定位到容器中心，需配合transform: translate(-50%, -50%)将自身中心对齐容器中心。
绝对定位元素用 left 和 top 居中，为什么加 50% 还偏了？
因为 left: 50% 和
是把元素**左上角**挪到视口中心，不是整个元素居中。视觉上明显偏右下——这是最常卡住人的第一步。</p> <ul> <li>必须配合 <code>transform: translate(-50%, -50%)把自身回拉一半宽高
margin-left: -100px 更健壮transform 在旧版 Safari（-webkit- 前缀，但现代项目基本可忽略
position: absolute 元素设 left: 50% 的参考系是谁？
是它的**最近的已定位祖先元素**（即 position 为 relative、absolute、fixed 或 sticky 的父级），不是视口。如果父级没定位，就会一路往上找，直到 ；而 默认宽高是视口大小，这时才“看起来”像相对于视口。
- 想强制相对于视口？给父容器加
position: relative，或直接让该元素脱离文档流（如用position: fixed） - 用
position: fixed+left: 50%+top: 50%+transform才真正锚定视口，且滚动时不动 - 别漏掉
z-index—— 绝对定位元素默认层叠在普通流之上，但多个同级绝对定位元素之间仍按 HTML 顺序堆叠
移动端双屏设备（比如折叠屏）下 50% 居中会出问题吗？
一般不会。百分比计算基于当前布局视口（layout viewport），和物理屏幕无关。但要注意两个边界情况：
- 页面有
viewport缩放（比如用户双指放大），50%仍按缩放后的视口算，视觉居中不受影响 - 横竖屏切换瞬间，若 JS 监听了
resize但没防抖，可能触发多次重排；纯 CSS 方案（left/top/transform）完全规避这个问题 - 极少数 Android WebView 里，
transform在position: absolute上有渲染毛刺，可加will-change: transform微调
不用 transform，只靠 left 和 top 能不能居中？
能，但得知道宽高，且必须用负 margin 回拉：
立即学习“前端免费学习笔记（深入）”；
element {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 100px;
margin-left: -100px;
margin-top: -50px;
}
问题在于：一旦宽高是 %、em、rem 或由内容撑开（fit-content），负 margin 就无法静态写死。这时候看似省了一行 transform，实则埋了响应式雷。
真正容易被忽略的是：当元素有 border 或 padding 时，margin 回拉值还得扣掉这些，而 transform 完全绕过盒模型计算。
