<div class="incredible-parent-element">
  <div class="awesome-child-element">
     Everything is<br>Awesome!!!  
  </div><!--/.awesome-child-element-->
</div><!--/.incredible-parent-element-->
@import url(//fonts.googleapis.com/css?family=Oswald);

%parent-vertical-align {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

%vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

html,
body {
  background-color: rgb(37, 37, 39);
  color: rgb(153, 153, 153);
  font-family: 'Oswald', arial, sans-serif;
  font-size: 1.4em;
  height: 100%;
  line-height: 1.4;
  margin: 0;
  padding: 0;
  text-align: center;
  text-transform: uppercase;
  width: 100%; 
}

.incredible-parent-element {
  @extend %parent-vertical-align;
  height: 100%;
  width: 100%;
}

.awesome-child-element {
  @extend %vertical-align;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.