Vertical And Horizontal Align Of Image

I have a placeholder (under construction) site which holds only one image with the logo. I horizontically aligned with margin: 0 auto. But how do I know additionally horizontal ali

Solution 1:

Urm.. Have you tried ?

<div class='placeholder'>
   <img src='../images/myimage'>
</div>

And the css for that markup

.placeholder
{
position : absolute;
top : 50%;
left : 50%;
width : 200px; /* Width of the image in question */
height : 200px;/* height of the image in question */
margin : -100px 0px 0px -100px;
}

This should bring your image to the very center of the page.

Solution 2:

This will do it

img#logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
}

http://jsfiddle.net/DxByM/

Solution 3:

Have a div to hold the image with the following rules:

margin-left: auto;
margin-right: auto;
margin-top:200px;  <!-- Will depend on your image -->
width:[your-image-width]px;

Will center your image