How to align elements vertically

vertical-align

/**
 * Remeber to set child element at least to 
 *   display: inline-block;
 *   vertical-align: middle;
 * More info and credits: http://css-tricks.com/centering-in-the-unknown/
 */
%ghostValign(){
  &:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: .1px; /* Adjusts for spacing or margin-right: -0.25em; */
  }
}

/**
 * Simple vertical align (middle)
 * element inside inline-block element
 */
@mixin valign($align: middle) {
  display: inline-block;
  vertical-align: $align;
  height: 100%;
}

/**
 * More advanced IE9+ solution
 * To avoid blurry elements set:
 * .parent-element {transform-style: preserve-3d;}
 * with vendor prefixes.
 * More info: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 */
%valign {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}