Vertical Centered

A way to center vertically a container

by rulokc

HTML

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

CSS

html, body {
    height: 100%
}
#centertop {
    height: 50%;
    margin-top: -50px; /* 50% of #container height */
    background: #afa; /* for your eyes */
}
#container {
    background-color: #abe;
    width: 400px;
    height: 100px;
    margin: 0 auto; /* horizontal centered */
}