Cross-browser vertical centering without Javascript.

Cross-browser vertical centering without Javascript and almost minimal CSS.

by Girisha Chennura

HTML

<div class="wrapper recent">
    <div class="centered">hellow world!<br/>what's up?</div>
</div>

<!-- OLD BROWSER ALTERNATIVE -->

<div class="wrapper">
    <div class="centered">oldbrowser:<br/>hellow world!<br/>what's up?</div>
    <span class="aligner"></span>
</div>

CSS

.wrapper{
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    text-align: center;
    font-size: 0px; /* remove margin between inlineblock elemnts */
}    
.centered, .aligner {
    display: inline-block;
    *display: inline; /** for ie6/7 */
    zoom: 1;
    vertical-align: middle
}
.centered{
    font-size: 20px;
    width: auto;
    height: auto;
    background: #cccccc;
}

/** recent is for browser that support :after pseudo class, else use the .aligner trick */
.wrapper.recent:after, .aligner{
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
    height: 100%;
    width:1;
    background:red;
    content: ""
}