font-awesome loading not centered

Question

I'm using font-awesome for my loading notification, but it's driving me crazy that there is just a slight offset causing the rotation to have a "wobble"

html

<div class="loading-div fa fa-cog fa-spin"></div>

css

.loading-div{
    position: absolute;
    z-index: 9999;
    font-size: 200px;
}

https://jsfiddle.net/69x2j60j/

I noticed that it's containing div is not square, but if I try to set height, width to static pixels it only gets worse... thoughts?

Answer 1

As you said yourself, the div isn't square so that's going to give you a bit of "wobble" as it rotates. Set the line-height (rather than height ) and width properties to equal values and set text-align to center and it should smooth things out a bit for you.

If it you're still getting a slight "wobble" then it may just be a rendering issue in your browser. Font Awesome is, I believe, optimised to be displayed at 14px , or multiples thereof, so try reducing the font-size to 196px .

Here is an updated Fiddle with 2 animations, the first with the dimensions set and the second with the dimensions set and the font-size reduced.

And here's an extract with the properties relavant to the "fix":

.loading-div{
    font-size:196px;
    line-height:200px;
    text-align:center;
    width:200px;
}

Answer 2

To center horizontally, use this (relevant CSS):

.stripes{
    text-align: center;
}

.loading-div{
    display: inline-block;
}

FIDDLE: https://jsfiddle.net/lmgonzalves/69x2j60j/1/