i want it to be exactly aligned inside the apartment - html

Question

I did something like this for the level system. But I think I did something wrong because of my carelessness. As an example, I showed the number 10, but this number is 1-2-3, etc. it breaks down when we do. Can you help please
.box {
position: relative;
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(40deg, #ffffff, #0c8a86 50%, #ffffff);
animation: rotate 12s linear infinite;
display: inline-grid;
top: 15px;
margin-left: 10px;
position: absolute;
}
.box:before,
.box:after {
content: " ";
position: absolute;
inset: 5px;
background: linear-gradient(#1c1734, #534770);
border-radius: inherit;
}
.box:before {
background: linear-gradient(45deg, #ffffff, #ffffff 40%, #ffffff);
filter: blur(8px);
}
#keyframes rotate {
100% {
transform: rotate(360deg);
/*filter: hue-rotate(360deg);*/
}
}
.circle-num {
color: white!important;
position: relative;
place-self: center!important;
display: inline-flex;
font-size: 25px!important;
top: 17.51px;
left: 21.5px;
}
<div class="box"></div>
<div class="circle-num">10</div>
i know I shouldn't do it with the position, but how would the solution to this be?

Answer 1

Set a container with relative to contain the elements inside so that you can set an absolute positioned element (for the numbering).
With a fixed width and height of 50px and some calculation on any existing margin/padding you can easily position your number with flex and align it vertical and horizontally centered with align-items and justify-content.
.container{
position: relative;
display: block;
}
.box {
position: relative;
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(40deg, #ffffff, #0c8a86 50%, #ffffff);
animation: rotate 12s linear infinite;
display: inline-grid;
top: 15px;
margin-left: 10px;
position: absolute;
}
.box:before,
.box:after {
content: " ";
position: absolute;
inset: 5px;
background: linear-gradient(#1c1734, #534770);
border-radius: inherit;
}
.box:before {
background: linear-gradient(45deg, #ffffff, #ffffff 40%, #ffffff);
filter: blur(8px);
}
#keyframes rotate {
100% {
transform: rotate(360deg);
/*filter: hue-rotate(360deg);*/
}
}
.circle-num {
color: white !important;
position: absolute;
display: flex;
font-size: 25px !important;
width: 50px;
height: 50px;
text-align: center;
margin: 15px 10px;
top: 0px;
left: 0px;
align-items: center;
justify-content: center;
}
<div class="container">
<div class="box"></div>
<div class="circle-num">1</div>
</div>