游标必须脱离旋转流，采用 absolute 定位 + transform: translate(-50%, -50%) 精准居中；不可置于任何带 rotate() 的父层（含伪元素）内，否则坐标系偏移导致位置飘忽、文字倒置或裁切。
游标必须脱离旋转流，否则会跟着转偏
环形进度条上的游标（比如百分比数字、小圆点或箭头图标）如果放在旋转的遮罩层或进度色块内部，transform: rotate() 会直接作用于它，导致位置飘忽、文字倒置甚至被裁切。这不是“没居中”，而是坐标系被带歪了。
正确做法是让游标完全独立于任何旋转逻辑——它只响应容器尺寸和定位基准，不参与进度计算。
- 外层容器设
position: relative - 游标元素用
position: absolute; top: 50%; left: 50%定位 - 再用
transform: translate(-50%, -50%)精准锚定中心 - 确保游标不在任何带
rotate()的父元素内部（包括::before/::after遮罩层）
absolute 定位 + transform 是唯一稳定居中方式
别用 margin: auto 或 flex 去“尝试”居中游标——环形进度条的结构通常有多层嵌套（底环、遮罩、伪元素），flex 容易受父级 overflow: hidden 或 transform 影响而失效；margin: auto 在绝对定位上下文中不生效。
top: 50%; left: 50%; transform: translate(-50%, -50%) 这组组合是目前所有主流浏览器中唯一能跨缩放、跨旋转、跨伪元素层级稳定居中的方案。
示例：
.progress-ring {
position: relative;
width: 160px;
height: 160px;
}
.progress-ring::before {
/* 遮罩层，带 rotate() */
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
clip-path: inset(0);
transform: rotate(45deg); /* 这里会转，但不影响游标 */
}
.progress-ring .cursor {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
z-index: 2;
}
游标尺寸变化时，需同步调整 translate 偏移
如果游标本身是动态内容（比如从 5% 变成 100%），宽度可能变化，但 translate(-50%, -50%) 始终以元素自身宽高为基准，所以它依然能保持视觉中心对齐——这点常被忽略，但恰恰是它可靠的原因。
唯一例外是：当游标用了 font-size 动态缩放（如 clamp()）或 scale() 变形时，需确认是否触发了新的包含块（containing block），否则 translate 仍有效，无需额外修正。
容易踩的坑：
- 给游标加
transform: rotate(-45deg)去“对齐弧线方向”——这会让它在不同进度下角度错乱 - 把游标塞进
::before伪元素里，以为能复用样式——伪元素继承父级transform，结果一起旋转 - 用
right: 0; bottom: 0;搭配margin微调——响应式缩放后偏移量失效
需要箭头指示器时，用 ::after 绝对定位更轻量
如果游标是小三角或箭头（非文本），推荐用伪元素实现，避免多一层 DOM。关键是它必须挂载在外层容器上，而不是旋转层内。
示例（指向当前进度终点的三角）：
.progress-ring::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid #4a90e2;
transform: translate(-50%, -50%) rotate(calc(var(--angle) + 90deg));
z-index: 2;
}
注意：--angle 是由进度值算出的角度（如 75% → 270deg），+90deg 是为了把三角默认朝上的方向对齐到弧线切线方向。这个 rotate() 仅作用于伪元素自身，不影响文本游标。
真正复杂的地方在于角度映射——conic-gradient 起始角是 -90°，SVG 是 0°，双半圆法左右起始不同。游标旋转角度必须和底层进度渲染逻辑严格一致，否则指示偏差肉眼可见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
