CodePen

HTML

            
              <h1><code>Vertical align: middle;</code></h1>
<p>No extra HTML markup. No pseudo element. No <code>display: table;</code></p>
<p>Downside: makes CSS <code>rem</code> unit unusable. (<a href="http://codepen.io/Merri/full/spDrx">you want to use <code>rem</code>?</a>)</p>
<h2>Browser support</h2>
<p>Firefox, Chrome, Opera, IE8+</p>
            
          
!

CSS

            
              html {
  height: 100%;
  font-size: 0;
  text-align: center;
  
  /* for decoration */
  background: #BBB;
}

head {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
}

body {
  display: inline-block;
  font-size: medium;
  vertical-align: middle;
  
  /* for decoration */
  outline: 1px solid red;
  padding: 1em;
  position: relative;
  background: #FFF;
}

/* all the rest is decoration */
body:before {
  background: red;
  color: #FFF;
  content: '<body>';
  padding: .4em;
  position: absolute;
  left: 0;
  top: 0;
}

body:after {
  background: red;
  color: #FFF;
  content: '</body>';
  padding: .4em;
  position: absolute;
  right: 0;
  bottom: 0;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................