Better aligment

[ArmorDarks]

• [x] Better alignment classes for flexbox. Current conjured with text-align classes may cause some issues... needs testing.
• [ ] vertical aligment helpers/mixins. Probably as per http://www.sitepoint.com/centering-with-sass/, http://howtocenterincss.com/ and https://css-tricks.com/centering-css-complete-guide/

Snippet from http://www.sitepoint.com/centering-with-sass/

/**
 * Enable position context for the child
 */
.parent {
  position: relative;
}

/**
 * Absolutely center the element in its parent
 * No dimensions are passed to the mixin, so it relies on CSS transforms
 */
.child-with-unknown-dimensions {
  @include center;
}

/**
 * Absolutely center the element in its parent
 * Width is passed to the mixin, so we rely on a negative margin for the
 * horizontal axis and CSS transforms for the vertical axis
 */
.child-with-known-width {
  @include center(400px);
}

/**
 * Absolutely center the element in its parent
 * Height is passed to the mixin, so we rely on a negative margin for the
 * vertical axis and CSS transforms for the horizontal axis
 */
.child-with-known-height {
  @include center($height: 400px);
}

/**
 * Absolutely center the element in its parent
 * Width is passed to the mixin, so we rely on a negative margins for both
 * horizontal axis and vertical axis
 */
.child-with-known-dimensions {
  @include center(400px, 400px);
}

@mixin center($width: null, $height: null) {
  position: absolute;
  top: 50%;
  left: 50%;

  @if not $width and not $height {
    transform: translate(-50%, -50%);
  } @else if $width and $height {
    width: $width;
    height: $height;
    margin: -($width / 2) #{0 0} -($height / 2);
  } @else if not $height {
    width: $width;
    margin-left: -($width / 2);
    transform: translateY(-50%);
  } @else {
    height: $height;
    margin-top: -($height / 2);
    transform: translateX(-50%);
  }
}