CSS rotate text from center center - html

Question

I want to use a rotating/spinning letter as my loader on a website. I want it to rotate through the center.
I have used transform-origin: center center; as mentioned here. But no help.
Can some fix this? Thanks!
Also, Is this the right approach? Please mention if there is any better of achieving this?
(I don't want to go with the svg.)
CSS
.custom-spinner2 {
font-family: sans-serif;
color: black;
margin: 5rem;
width: 2rem;
height: auto;
line-height: 1rem;
transform-origin: center center;
-webkit-animation-name: spin;
-webkit-animation-duration: 1000ms;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: spin;
-moz-animation-duration: 1000ms;
-moz-animation-iteration-count: infinite;
-ms-animation-name: spin;
-ms-animation-duration: 1000ms;
-ms-animation-iteration-count: infinite;
animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: infinite;
}
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
**HTML**
<p class="custom-spinner2" style="font-size:5rem !important;">W</p>

Answer 1

Do this. First, centralize the letter both vertically and horizontally to the center of the page. Then apply rotation animation to the letter. It should work. Don't add any sort of width to the text. Otherwise, the text will left align itself in that width and the animation will look weird.
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
p {
animation: Rotate infinite 1s;
font-size: 50px;
}
#keyframes Rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<p>M</p>

Answer 2

Change the display from block to inline-block and remove the width:
.custom-spinner2 {
font-family: sans-serif;
color: black;
margin: 5rem;
display: inline-block;
height: auto;
line-height: 1rem;
transform-origin: center center;
-webkit-animation-name: spin;
-webkit-animation-duration: 1000ms;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: spin;
-moz-animation-duration: 1000ms;
-moz-animation-iteration-count: infinite;
-ms-animation-name: spin;
-ms-animation-duration: 1000ms;
-ms-animation-iteration-count: infinite;
animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: infinite;
}
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
**HTML**
<p class="custom-spinner2" style="font-size:5rem !important;">W</p>

Answer 3

width is set to 2 rem, which makes the letter to go outside the container, around whose center it rotates (the letter needs more space). Set width to 5rem and you are set:
.custom-spinner2 {
font-family: sans-serif;
color: black;
margin: 5rem;
width: 5rem;
height: auto;
line-height: 1rem;
transform-origin: center center;
-webkit-animation-name: spin;
-webkit-animation-duration: 1000ms;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: spin;
-moz-animation-duration: 1000ms;
-moz-animation-iteration-count: infinite;
-ms-animation-name: spin;
-ms-animation-duration: 1000ms;
-ms-animation-iteration-count: infinite;
animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: infinite;
}
#-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
**HTML**
<p class="custom-spinner2" style="font-size:5rem !important;">W</p>