vertically aligned page

dabblet.css

/* vertically aligned page */

/* postcard style */
html, body {  height: 100%;  text-align: center;  white-space: nowrap;  margin: 0}
#page {  display: inline-block;  vertical-align: middle;  text-align: left;      /* makes the content if page  */  white-space: normal;   /* behalf normal again        */}
body:before{  content: '';  display: inline-block;  height: 100%;  width: 0;  overflow: hidden;  vertical-align: middle;  margin-left: -.3em;}

/* custom style - you don't need to copy this */
body{  background-color: #000;  font-family: 'Lucida Console','Courier New', monospace;  color: #0f0; line-height: 20px; font-size: 15px;}
#page{  max-width: 800px;  width:100%; background: #000;  box-shadow: inset 0 0 10px #0f0, 0 0 40px rgba(0, 0, 0, 0.1) inset; padding: 20px; border-radius: 10px;}

dabblet.html

<div id="page">
  <h1>Vertically aligned page</h1>
  <p>With this simple css you can create creepy postcard style websites with flexible height (try resizing this page). It makes <code>vertical-align</code>   work in a way you would expect it to work when you hear about it the first time. Works down to IE8!</p>
</div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}