Vertically centered div

I realize there are lots of examples out there, and I am working from one but cannot seem to get it to function properly.

Here's what I've got currently:

<div id="w">
    <div id="iw">
        <a href="#">
            <img src="http://stackoverflow.com/content/stackoverflow/img/apple-touch-icon.png" />
        </a>
    </div>
</div>

And:

body {
    width:100%;
    margin:0;
    padding:0;
}
#w {
    display:table;
    width: 100%;
}
#iw {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}
#iw a img {
    -moz-box-shadow:0 1em开发者_StackOverflow社区 1em #444;
    -webkit-box-shadow:0 1em 1em #444;
    -o-box-shadow:0 1em 1em #444;
    box-shadow:0 1em 1em #444;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -o-border-radius:10px;
    border-radius: 10px;
}

(http://jsfiddle.net/rlemon/zjWaz/)

Basically I want to vertically and horizontally centre the iw container.

The idea I had read about is the wrapper container is display: table; and the inner content is display: table-cell; and then you can use the vertical-alignment from the table. Great, now how do I make the table 100% height of the page? best I can do is a fixed height, which (without the use of JS) will not help me be exactly vertically centred.

Try the following CSS instead:

html,body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    border:1px solid #000;
}
#w {
    display:table;
    height:100%;
    width: 100%;
}
#iw {
    display:table-cell;
    text-align:center;
    height:100%;
    width:100%;
    vertical-align:middle;
}
#iw a img {
    -moz-box-shadow:0 1em 1em #444;
    -webkit-box-shadow:0 1em 1em #444;
    -o-box-shadow:0 1em 1em #444;
    box-shadow:0 1em 1em #444;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -o-border-radius:10px;
    border-radius: 10px;
}

See this in an updated fiddle: http://jsfiddle.net/zjWaz/1/

if you know width and height easier would be to position iw absolute, top: 50%; left: 50% and set negative margin half height and width (lets say width/height are 200px that way margin: -100px 0 0 -100px )

you dont need any js or like something, just apply the style as a table: display:table and table row with 100%. look up for more info here: http://linuxandfriends.com/2009/04/04/how-to-style-div-elements-as-tables/

Or better, you can do it with a div fixed

Check this Css

body {
width:100%;
margin:0;
padding:0;
 }
#w {
display:table;
width: 100%;
}
#iw {
width:100%;
height:100%;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-50px;
}
#iw a img {
-moz-box-shadow:0 1em 1em #444;
-webkit-box-shadow:0 1em 1em #444;
-o-box-shadow:0 1em 1em #444;
box-shadow:0 1em 1em #444;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius: 10px;
}

Also check Updated Fiddle. http://jsfiddle.net/zjWaz/4/

Hope you get your answer.