等级系统圆形数字对齐问题求助：替代position的实现方案

你的问题根源在于把数字元素和圆形容器分开布局，用硬编码的top/left定位数字，这种方式只适配固定长度的内容，换单字符数字自然会错位。正确的做法是把数字嵌套进圆形容器内部，利用容器的布局属性实现自动居中，不管字符长度如何都能保持对齐。

修改步骤： #

• 调整HTML结构：把数字元素放到圆形容器内部，让两者形成父子关系，方便统一控制布局。
• 清理容器冗余属性：移除.box里冲突的position:absolute，保留position:relative（供伪元素定位使用），同时利用display:grid实现内部元素居中。
• 重置数字元素样式：删掉.circle-num里的top/left硬编码定位，依靠容器的布局规则自动居中。

修改后的完整代码： #

.box {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(40deg, #ffffff, #0c8a86 50%, #ffffff);
  animation: rotate 12s linear infinite;
  display: grid; /* 用grid实现内部元素居中 */
  place-items: center; /* 水平+垂直居中 */
  top: 15px;
  margin-left: 10px;
}

.box:before,
.box:after {
  content: " ";
  position: absolute;
  inset: 5px;
  background: linear-gradient(#1c1734, #534770);
  border-radius: inherit;
  z-index: 1; /* 让伪元素在数字下方，避免遮挡 */
}

.box:before {
  background: linear-gradient(45deg, #ffffff, #ffffff 40%, #ffffff);
  filter: blur(8px);
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

.circle-num {
  color: white !important;
  font-size: 25px !important;
  z-index: 2; /* 确保数字在伪元素上方显示 */
}

<div class="box">
  <div class="circle-num">1</div>
</div>
<div class="box">
  <div class="circle-num">10</div>
</div>

关键说明： #

1. 用display: grid配合place-items: center，可以让容器内部的元素自动水平和垂直居中，不管内容是单字符还是多字符，都能精准对齐圆心。
2. 给伪元素添加z-index:1，数字元素添加z-index:2，确保数字不会被圆形的内部渐变层遮挡。
3. 移除了所有硬编码的位置偏移，布局完全由CSS的grid规则控制，兼容性和可维护性更好。

内容的提问来源于stack exchange，提问作者garfield