Vertical Alignment with CSS

vertical-alignment.css

/* For modern browsers (IE9+) */
.valign {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

/* Alternative for IE8+, apply to a container of an inline-block element
   Ex:
   <span class="i-box valign">
    <i class="i-powerpoint"></i>
   </span>
*/
.valign-fallback:before {
  content: "";
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}