Center a div/element within a div

_truly-centered.scss

@mixin centerer($horizontal: true, $vertical: true) {
  position: absolute;
  @if ($horizontal and $vertical) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  } @else if ($horizontal) {
    left: 50%;
    transform: translate(-50%, 0);
  } @else if ($vertical) {
    top: 50%;
    transform: translate(0, -50%);
  }
}

example.html

<div class=“parent”>
  <div class=“child both”>I’m centered on both axis!</div>
</div>

<div class=“parent”>
  <div class=“child horizontal”>I’m centered horizontally!</div>
</div>

<div class=“parent”>
  <div class=“child vertical”>I’m centered vertically!</div>
</div>

example.scss

.parent {
 position: relative;
}

.child {
 &.both {
   @include centerer;
 }

 &.horizontal {
   @include centerer(true, false);
 }

 &.vertical {
   @include centerer(false, true);
 }
}