How To Make a Vertically Centered Web Page

This took me WAAAAY too long to figure out. I can’t remember where I found this solution so I apologize for not listing any credit here.

The below code shows how to center a site vertically using a floated shim.

The Styles

<style type="text/css">
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

div#shim {
  visibility: hidden;
  width: 100%;
  height: 50%; /* Bump div#blueBox down half the height of the screen. */
  margin-top: -200px; /* Half the height of div#blueBox. */
  float: left;
}

div#blueBox {
  background: blue;
  width: 100px;
  height: 400px;
  clear: both;
  position: relative;
  top: -200px;
  /* IE4ever Hack: Hide from IE4 (<http://exanimo.com/css/ie4ever>) **/
  position: static;
  /** end hack */
}

/* Hide from IE5mac \*//*/
  div#shim {
  display: none;
}

html, body {
  height: auto;
}
/* end hack */

</style>

The HTML

<div id="shim"></div>
<div id="blueBox">my centered stuff</div>

The vertically centered page.