center an element on the page with include mixin
/* First we create our mixin with the styles to center the element */
@mixin center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Then we call that mixin in the child element. The position of the parent must be relative */
.parent {
position: relative;
}
.child {
@include center;
}