html - Center an image horizontally using CSS

Question

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 ?

Answer 1

Try this for your CSS:

.center img {        
  display:block;
  margin-left:auto;
  margin-right:auto;
}

and then add to your image to center it:

class="center"