Display the image in the center of the page.

Question

I have a image -- a loading image.

I want that image to be displayed in the center on the page. How can i do that?

The code that i wrote is :

img.loading
 {
  position:absolute;
  left:0px;
  top:0px;
  z-index:1;
 }

How can i make this image always be displayed in the center of the page??

Zeeshan

Answer 1

See W3C

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto 
}

<IMG class="displayed" src="..." alt="...">

Answer 2

Found this: How to Center an Image Perfectly in CSS, might help.

#img
{
    position:absolute;
    width:592px; /*image width */
    height:512px; /*image height */
    left:50%; 
    top:50%;
    margin-left:-296px; /*image width/2 */
    margin-top:-256px; /*image height/2 */
}

Answer 3

possible solution

http://stackoverflow.com/questions/1207525/center-block-element-in-element/1207625#1207625