How to fix the center?-CodePudding

How to fix the center ? I want to fix the number which is rotating inside the circle, I want to fix it at the center of the rotating circle. Please Answer How to do that?

ToDisplay = [0,1,2,3,4,5,6,7,8,9]

function GenerateNew(){
    insertedArray = [false,false,false,false,false,false,false,false,false,false]

    ToFindIndex = Math.floor(Math.random() * (ToDisplay.length))
    ToFind.innerHTML = ToDisplay[ToFindIndex]
    insertedArray[ToFindIndex] = true
    
    for(i=1;i<9;i  ){
        randIndex = ToDisplay[Math.floor(Math.random() * (ToDisplay.length))]
        while(insertedArray[randIndex]){
            randIndex = Math.floor(Math.random() * (ToDisplay.length)) 
        }
        document.getElementById(`random${i}`).innerHTML = ToDisplay[randIndex]
        insertedArray[randIndex] = true
    }
    
    document.getElementById(`random${Math.floor(Math.random()*8)   1}`).innerHTML = ToFind.innerHTML    
}

GenerateNew()

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

body {
    height: 100vh;
    width: 100vw;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle {
    aspect-ratio: 1;
    height: 98vh;
    background-color: white;
    border-radius: 50%;
    position: relative;
    /* overflow: hidden; */
    animation: spinoffPulse 7s infinite linear;
}

/* Slow - 5
Medium - 7
Fast - 10 */

#ToFind {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    animation: counterPulse 7s infinite linear;
    font-size: 8vh;
    cursor: pointer;
}

.random {
    transform: translateX(-50%) translateY(-50%);
    font-size: 6vh;
    cursor: pointer;
}

#random1 {
    position: absolute;
    top: 18%;
    left: 17%;
}

#random2 {
    position: absolute;
    top: 3%;
    left: 50%;
}

#random3 {
    position: absolute;
    top: 18%;
    left: 83%;
}

#random4 {
    position: absolute;
    top: 50%;
    left: 97%;
}

#random5 {
    position: absolute;
    top: 82%;
    left: 83%;
}

#random6 {
    position: absolute;
    top: 97%;
    left: 50%;
}

#random7 {
    position: absolute;
    top: 82%;
    left: 17%;
}

#random8 {
    position: absolute;
    top: 50%;
    left: 3%;
}

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

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

   <div  id="circle">
        <div  id="ToFind">A</div>
        <div  id="random1">A</div>
        <div  id="random2">A</div>
        <div  id="random3">A</div>
        <div  id="random4">A</div>
        <div  id="random5">A</div>
        <div  id="random6">A</div>
        <div  id="random7">A</div>
        <div  id="random8">A</div>
    </div>

How to fix the center ? I want to fix the number which is rotating inside the circle, I want to fix it at the center of the rotating circle. Please Answer How to do that?

CodePudding user response：

move the <div class='toFind'> to below the circle div and get rid of the animation on toFind

ToDisplay = [0,1,2,3,4,5,6,7,8,9]

function GenerateNew(){
    insertedArray = [false,false,false,false,false,false,false,false,false,false]

    ToFindIndex = Math.floor(Math.random() * (ToDisplay.length))
    ToFind.innerHTML = ToDisplay[ToFindIndex]
    insertedArray[ToFindIndex] = true
    
    for(i=1;i<9;i  ){
        randIndex = ToDisplay[Math.floor(Math.random() * (ToDisplay.length))]
        while(insertedArray[randIndex]){
            randIndex = Math.floor(Math.random() * (ToDisplay.length)) 
        }
        document.getElementById(`random${i}`).innerHTML = ToDisplay[randIndex]
        insertedArray[randIndex] = true
    }
    
    document.getElementById(`random${Math.floor(Math.random()*8)   1}`).innerHTML = ToFind.innerHTML    
}

GenerateNew()

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

body {
    height: 100vh;
    width: 100vw;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle {
    aspect-ratio: 1;
    height: 98vh;
    background-color: white;
    border-radius: 50%;
    position: relative;
    /* overflow: hidden; */
    animation: spinoffPulse 7s infinite linear;
}

/* Slow - 5
Medium - 7
Fast - 10 */

#ToFind {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    //animation: counterPulse 7s infinite linear;
    font-size: 8vh;
    cursor: pointer;
}

.random {
    transform: translateX(-50%) translateY(-50%);
    font-size: 6vh;
    cursor: pointer;
}

#random1 {
    position: absolute;
    top: 18%;
    left: 17%;
}

#random2 {
    position: absolute;
    top: 3%;
    left: 50%;
}

#random3 {
    position: absolute;
    top: 18%;
    left: 83%;
}

#random4 {
    position: absolute;
    top: 50%;
    left: 97%;
}

#random5 {
    position: absolute;
    top: 82%;
    left: 83%;
}

#random6 {
    position: absolute;
    top: 97%;
    left: 50%;
}

#random7 {
    position: absolute;
    top: 82%;
    left: 17%;
}

#random8 {
    position: absolute;
    top: 50%;
    left: 3%;
}

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

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

<div  id="circle">
        
        <div  id="random1">A</div>
        <div  id="random2">A</div>
        <div  id="random3">A</div>
        <div  id="random4">A</div>
        <div  id="random5">A</div>
        <div  id="random6">A</div>
        <div  id="random7">A</div>
        <div  id="random8">A</div>
    </div>
    
    <div  id="ToFind">A</div>

CodePudding user response：

You forgot minus the size of your element when positioning. Add the following would (almost) solve the problem.

#ToFind {
  top: calc(50% - 4vh); /* half of your font-size */
  left: calc(50% - 0.5ch);
}