Center anything horizontally vertically or on both axis in scss

_center.mixin.scss

// Center anything horizontally, vertically or both (assuming that the parents position is set to relative)
// Codepen Example Usage: https://codepen.io/anon/pen/yPbgYW

@mixin center($center: 'all') {
  position: absolute;
  
  @if $center == 'all' {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  } @else if $center == 'horizontal' {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  } @else if $center == 'vertical' {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

I don't like this approach, since it sometimes make the centered element blurry in chrome.