Useful SCSS Positioning Mixins

positioning-mixins.scss

// vertically center
@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  transform: translateY(-50%);
}
// Example usage: @include vertical-align;

// horizontally align
@mixin horizontal-align($position: relative) {
  position: $position;
  left: 50%;
  transform: translateX(-50%);
}
// Example usage: @include horizontal-align;


// middle align (vertically & horizontally center)
@mixin middle-align($position: absolute) {
  left: 50%;
  position: $position;
  top: 50%;
  transform: translate(-50%, -50%);
}
// Example usage: @include middle-align;