SCSS: Center element without dimmension, only with width/height, with width and height

@mixin centered($width: null, $height: null){ position: absolute; top: 50%; left: 50%; if not $width and not $height { transform: translate(-50%, -50%); } @else if not $width { margin-top: -($height/2); transform: translateX(-50%); height: $height; } @else if not $height { margin-left: -($width/2); transform: translateY(-50%); width: $width; } @else if $width and $height { margin-top: -($height/2); margin-left: -($width/2); height: $height; width: $width; } } // Example: // .hero-box { // $width: 600px; // $height: 300px; // @include centered($width, $height); // }