<h1>Remember you hated &lt;table&gt;'s?</h1>
<div class="vertical-centered-text">
  <h2>They're still useful to vertical-align text</h2>
<p>Support: IE8+</p>
/* vertical-align text using `display:table-cell` */
.vertical-centered-text {
  display: table;
  .vertical-centered-text > * {
    display: table-cell;
    vertical-align: middle;

/* just for the demo */
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
html,body {height: 100%;}
body {
  font-family: 'Roboto', 'sans-serif';
  background-color: #1abc9c;
  color: white;
  text-align: center;
h1,h2,p {
  font-weight: 300;
  font-size: 2em;
  text-shadow: #16a085 1px 1px 1px;
p {
  text-transform: uppercase;
  font-size: 1em;
div {
  margin: 5% auto;
  width: 80%;
  height: 200px;
  border: 2px solid #16a085;
  border-radius: 6px;
  text-align: center;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.