Vertical Centered with header in top

A way to center vertically a container with header in top.

by rulokc

HTML

<div id="centertop"></div>
<div id="container">
    <div class="header">
        Header
    </div>
    Resize window height to see.
</div>

CSS

html, body {
    height: 100%
}
#centertop {
    float: left; /* the float change behavior */
    width: 100%;
    height: 50%;
    margin-top: -100px; /* 50% of #container height */
    background: #afa; /* for your eyes */
}
#container {
    clear: both; /* because #centertop float */
    background-color: #abe;
    width: 400px;
    height: 200px;
    margin: 0 auto; /* horizontal centered */
}
#container .header {
    background-color: #555;
    color: #fff;
    text-align: center;
    height: 30px;
    line-height: 30px;
}