center an element on the page with include mixin

1/* First we create our mixin with the styles to center the element */
2@mixin center {
3  position: absolute;
4  top: 50%;
5  left: 50%;
6  transform: translate(-50%, -50%);
7}
8
9/* Then we call that mixin in the child element. The position of the parent must be relative */
10.parent {
11  position: relative;
12}
13
14.child {
15 @include center; 
16}