Center an image horizontally using CSS

Issue

I am trying to center a image horizontally using css.

I am displaying my image on the screen with the following HTML code:

<div id="loading" class="loading-invisible">  
    <img class="loading" src="logo.png">
</div>

I am croping my image as I only want to display some of the image and I am using the following css:

img.loading 
{
position:absolute;
clip:rect(0px,681px,75px,180px);
}

however I can't work out how to center the image once it has been croped.

Anyone able to help ?

Solution

use position absolute and margin like this

img.loading{
  position: absolute;
  left: 50%;
  margin-left: -(half ot the image width)px
}

Answered By - Zendy