Why the div is not in center?

Question

https://code.sololearn.com/WnVn3sao3jK8/?ref=app

Answer 1

Just change values of top and left like:
top :50px;
left :50px;
Then I got it centered.
(but bcos of using px instead of % ,this website won't be responsive)

Answer 2

ABC Ok then try adjusting the values of top and left yourself.
Like :
top :5%;
left :5%;
This almost makes it centered.

Answer 3

Do you like this:
<style>
body {
width: 100vw;
height: 100vh;
}
div{
width: 200px;
height: 200px;
border: 20px solid #efefef;
border-radius: 50%;
position: absolute;
margin-left: 30vw;
margin-top: 35vh;
border-bottom: 20px solid dodgerblue;
animation: anim 2s linear infinite;
}
@keyframes anim{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
</style>

Answer 4

You have to translate then rotate not the opposite... make the animation like:

@keyframes anim{
from{
transform: translate(-50%, -50%) rotate(0);
}
to{
transform: translate(-50%, -50%) rotate(360deg);
}
}

Its counter intuitive but order applied is from right to left with respect the transform functions... In practice when apply more transform function, you have to write in opposite order

Answer 5

Alphin K Sajan but I need responsiveness