<div class="parent">
  <div class="child both">I'm centered on both axis!</div>
</div>

<div class="parent">
  <div class="child top">I'm centered top!</div>
</div>

<div class="parent">
  <div class="child right">I'm centered right!</div>
</div>

<div class="parent">
  <div class="child bottom">I'm centered bottom!</div>
</div>

<div class="parent">
  <div class="child left">I'm centered left!</div>
</div>

@mixin center($pos:both ) {
  position: absolute;

  @if ($pos==both) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

  } @else if ($pos==top) {
    left: 50%;
    transform: translate(-50%, 0);

  } @else if ($pos==left) {
    top: 50%;
    transform: translate(0, -50%);
  } @else if ($pos==right) {
    top: 50%;
    right:0;
    transform: translate(0, -50%);
  } @else if ($pos==bottom) {
    bottom: 0;
    left:50%;
    transform: translate(-50%, 0);
  }
}

.parent {
  position: relative;
  background: #f06d06;
  width: 50%;
  height: 200px;
  margin: 20px auto;
}

.child {
  background: white;
  padding: 20px;

  &.both {
    @include center(both);
  }

  &.top {
    @include center(top);
  }
  
  &.right {
    @include center(right);
  }
  
  &.bottom {
    @include center(bottom);
  }
  
  &.left {
    @include center(left);
  }
  
}

body {
  background: papayawhip;
}