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 $widht 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); // }
Latest version
- Add example

2 Responses

Typo on line 5 - `if not $widht and not $height {` should be `if not $width and not $height {`.
@James Hobson Thank you, man!

Write a comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.