Center an element absolutely and relatively

center-element.scss

/**
author: Ralph Crisostomo
*/

@mixin center-element($width, $height) {
  width:$width;
  height:$height;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($height / 2);
  margin-left: -($width / 2);
}

@include center-element(<element width>,<element hieght>);

/** Sample */
.container{
  width: 100px;
  height: 
  // position: relative;  // Uncomment to center .element inside .container
 
  // Will be centered absolutely 
  .element{
    width: 50px;
    height: 50px;
    @include center-element(50px,50px);
  }

}