Foundation SCSS xy center component

xy-center.scss

@import "global";

//
// @variables
//

//
// @mixins

@mixin x-center() {
  position:absolute;
  left:50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
@mixin y-center() {
  position:relative;
  top:50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@mixin xy-center() {
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


.xy-center {
  @include xy-center();
}

.x-center {
  @include x-center();
}

.y-center {
  @include y-center();
}