Vertical and Horizontal Centering Mixins with Compass

compass-centering.scss

// vertcal and horizontal alignment

// Flexbox Method: uses flexbox to horizontally and vertically center child element (this may be less buggy than the centering mixins below)
@mixin flex-center-child-elements {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Transform Method: sometimes blurry
// Centering: NOTE - requires absolute or relative positioning
@mixin vertical-align($position: relative, $offset: 50%) {
  position: $position;
  top: $offset;
  @include transform(translateY(-50%));
}

// for use with absolute or relatively positioned elements
@mixin horizontal-align($position: relative, $offset: 50%) {
  position: $position;
  left: $offset;
  @include transform(translateX(-50%));
}

@mixin both-align($position: relative, $offset-left: 50%, $offset-top: 50%) {
  position: $position;
  left: $offset-left;
  top: $offset-top;
  @include transform(translate(-50%, -50%));
}

// use this on parent of vertically aligned element
// if vertically aligned element becomes blurry
@mixin center-aligned-parent {
  @include transform-style(preserve-3d);
}