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 I wrote is :

im         


        

Answer 1

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 2

See W3C

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

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

Answer 3

Or you can use background: url(center_image) no-repeat center;

---

working example: http://jsfiddle.net/DT4hL/