Centered Block with Top Prevention

Centered block. Horizontal and Vertical. Top visible even if the block is longer.

by rulokc

HTML

<div class="puller"></div>
<div class="centered">
    Resize the window
</div>

CSS

html, body {
 height: 100%; /* important */
 margin: 0;
 padding: 0;
}
.centered {
     background: lime;
     width: 200px;
     height: 300px;
    
     margin: 0 auto;
     clear: both; /* Ensure size */
}
.puller {
     float: left;
     width: 100%;
     height: 50%;
     margin-top: -150px; /* half centered height */
}