<div class="box-wrap">
  <h3>center both</h3>
  <div class="box center-both"></div>
</div>
<div class="box-wrap">
  <h3>center vertical</h3>
  <div class="box center-vertical"></div>
</div>
<div class="box-wrap">
  <h3>center horizontal</h3>
  <div class="box center-horizontal"></div>
</div>

//////////////////////
//Mixin
//////////////////////
.center(@horizontal: true, @vertical: true) {
  position: absolute;
  & when ( @horizontal = true ) and ( @vertical = true ) {top: 50%;left: 50%;transform: translate(-50%, -50%);}
  & when ( @horizontal = true ) and ( @vertical = false ) {left: 50%;transform: translate(-50%, 0);}
  & when ( @horizontal = false ) and ( @vertical = true ) {top: 50%;transform: translate(0, -50%);}
}

//////////////////////
//Boring shit
//////////////////////
body{text-align: center;}
.box-wrap{
  width: 200px;height: 200px;background: #ebebeb;margin: 60px 20px;display: inline-block;position: relative;
  h3{margin-top: -30px;position: absolute;}
}


//////////////////////
//Mixin Application
//////////////////////
.box{
  background: aqua;width: 100px;height: 100px;

  &.center-both{
    .center();
  }

  &.center-vertical{
    .center(false);
    // right:0; //TOGGLE
  }

  &.center-horizontal{
    .center(true, false);
    // bottom: 0; //TOGGLE
  }
}