百分比 left 不生效是因为父容器未设置 position（relative/absolute/fixed/sticky），导致定位参考系回溯至 html；正确居中需 left: 50% + transform: translateX(-50%)，且父容器需有确定宽高。
百分比 left 不生效，实际是父容器没“接住”定位
百分比 left（或 top）必须作用于 position 为 relative、absolute、fixed 或 sticky 的祖先元素，否则它会一路往上找，最终落到 上——而 的宽度可能被重置样式干扰，或者根本没设 width，导致 left: 50% 算出来是 0 或不可预期的值。
- 打开开发者工具，选中目标元素，在 Styles 面板里从下往上点父级，看哪个节点有
position: relative（或其它非static）；没有就停在 - 临时给最靠近的父容器加一句
position: relative，再看left: 50%是否突然“对了” - 如果父容器本身用了
transform（比如transform: scale(0.9)），它会创建新的 containing block，此时百分比仍按该 transform 元素的尺寸算，但视觉上容易误判偏移量
left: 50% 没居中，是因为没配 transform
left: 50% 是让元素**左边缘**移到父容器水平中点，不是让元素**自身中心**对齐。所以不加修正的话，元素会向右偏移自身宽度一半，大概率出界。
- 正确居中组合：
left: 50%; transform: translateX(-50%) - 若用
inset（现代写法），可写inset: auto; left: 50%; transform: translateX(-50%)，但注意inset本身不改变定位类型，仍需父级position: relative - 避免同时设
left和right：它们会挤压宽度，left: 20%; right: 20%实际宽度只剩 60%，且在小屏下易溢出
父容器宽高不确定时，百分比 top/left 容易失效
top 和 left 的百分比分别基于父容器的**高度**和**宽度**，但前提是父容器有确定的尺寸。如果父容器是 height: auto（由内容撑开），那 top: 100% 就可能算成 0，因为“100% 的高度”无法解析。
- 检查父容器是否设置了明确的
height或min-height；flex/grid 容器中尤其要注意，height: auto是默认行为 - 在 flex 容器里慎用
top: 0期望“贴顶”——它仍以 flex container 的 border box 为基准，而该容器高度可能随子项变化 - 用
getBoundingClientRect()在控制台查真实像素值，确认是不是计算结果本身就是 0，而不是渲染错位
移动端 Safari 里百分比定位突然错乱
iOS Safari 对 position: absolute + transform + 滚动容器的组合有已知渲染 bug，尤其当父容器启用了 -webkit-overflow-scrolling: touch（iOS 16+ 已废弃）。
- 移除
-webkit-overflow-scrolling: touch，改用原生滚动行为 - 避免在同一个元素上混用
top/left和transform；优先用transform: translateY()做微调，它不参与布局计算，更稳定 - 真机测试前，先关掉 Safari 实验性功能（Settings > Safari > Advanced > Experimental Features），特别是 WebGPU 和 Canvas 加速，它们会干扰定位坐标返回
真正卡住问题的，往往不是 left: 50% 写错了，而是你没意识到它正在对一个看不见高度、没设 position、甚至被 transform 暗中改写参考系的父容器做计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
