vertical align trick

by marcelow

HTML

<div class="wrapper-with-height">
<div class="to-the-middle">this will be vertical aligned to the middle</div>
</div>

CSS

.wrapper-with-height{height:500px;}
.wrapper-with-height:after {
    content:'.';
    display:inline-block;
    vertical-align:middle;
    width:0;
    height:100%;
    overflow:hidden;
}
.to-the-middle {display:inline-block;vertical-align:middle;width:200px;background:red;}