SU-SWS/decanter

///
/// Mixin that uses absolute positioning and translate to center an element
/// within a parent container no matter what the width of height of either are.
/// The parent container needs to have `{position: relative;}` for this to work properly.
/// There might be other ways to center elements, e.g., by using Flexbox and CSS grid.
/// Please use the most appropriate method for your project.
///
/// @name centering
///
/// @param {boolean} $horizontal - Center horizontally if `true`. Default is `true`.
/// @param {boolean} $vertical - Center vertically if `true`. Default is `true`.
///
/// @group mixin
@mixin centering($horizontal: true, $vertical: true) {
  position: absolute;

  @if ($horizontal and $vertical) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  @else if ($horizontal) {
    left: 50%;
    transform: translate(-50%, 0);
  }
  @else if ($vertical) {
    top: 50%;
    transform: translate(0, -50%);
  }
}