Center element #mixin

_centered.scss

// Center element.
// https://css-tricks.com/snippets/sass/centering-mixin/
//
// Usage:
// Arguments: horizontal, vertical
// Note: parent div should be in relative position.
//
// @include centered();
// @include centered(true, false);
// @include centered(false, true);
@mixin centered($horizontal: true, $vertical: true) {
  position: absolute;
  @if ($horizontal and $vertical) {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  } @else if ($horizontal) {
    left: 50%;
    transform: translate(-50%, 0);
  } @else if ($vertical) {
    top: 50%;
    transform: translate(0, -50%);
  }
}