Centering Sass Mixin

[codepenembed height=”300″ themeid=”16787″ slughash=”OXRGjP” defaulttab=”result” user=”brandonhimpfen”]See the Pen Centering Sass Mixin by Brandon Himpfen (@brandonhimpfen) on CodePen.[/codepen_embed]The following Sass mixin will allow you to center horizontally and vertically assuming the parent is relative positioned.

@mixin centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

To use the above Sass mixin, do the follow:

.classname {
  @include centered;