// horizontal center
@mixin middle-column() {
  position: absolute;
  top: 50%;
  @include transform(translateY(-50%));
}

// vertical center
@mixin middle-row() {
  position: absolute;
  left: 50%;
  @include transform(translateX(-50%));
}

// horizontal&vertical center
@mixin middle-all() {
  position: absolute;
  top: 50%;
  left: 50%;
  @include transform(translate(-50%, -50%));
}