Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.4)
// ----

/// Horizontal, vertical or absolute centering
/// If specified, this mixin will use negative margins
/// based on element's dimensions. Else, it will rely
/// on CSS transforms which have a lesser browser support
/// but are more flexible as they don't require to set
/// any specific dimensions to the element.
/// 
/// @param {Length | null} $width [null] - Element width
/// @param {Length | null} $height [null] - Element height
///
@mixin center($width: null, $height: null) {
  position: absolute;
  top: 50%;
  left: 50%;
  
  @if not $width and not $height {
    transform: translate(-50%, -50%);
  } @else if $width and $height {
    width: $width;
    height: $height;
    margin: -($width / 2) #{0 0} -($height / 2)
  } @else if not $height {
    margin-left: -($width / 2);
    transform: translateY(-50%);
    width: $width;
  } @else {
    margin-top: -($height / 2);
    transform: translateX(-50%);
    height: $height;
  }
}

/**
 * Enable position context for the child
 */
.parent {
  position: relative;
}

/**
 * Absolutely center the element in its parent
 * No dimensions are passed to the mixin, so it relies on CSS transforms
 */
.child-with-unknown-dimensions {
  @include center;
}

/**
 * Absolutely center the element in its parent
 * Width is passed to the mixin, so we rely on a negative margin for the
 * horizontal axis and CSS transforms for the vertical axis
 */
.child-with-known-width {
  @include center(400px);
}

/**
 * Absolutely center the element in its parent
 * Height is passed to the mixin, so we rely on a negative margin for the
 * vertical axis and CSS transforms for the horizontal axis
 */
.child-with-known-height {
  @include center($height: 400px);
}

/**
 * Absolutely center the element in its parent
 * Width is passed to the mixin, so we rely on a negative margins for both
 * horizontal axis and vertical axis
 */
.child-with-known-dimensions {
  @include center(400px, 400px);
}

SassMeister-output.css

/**
 * Enable position context for the child
 */
.parent {
  position: relative;
}

/**
 * Absolutely center the element in its parent
 * No dimensions are passed to the mixin, so it relies on CSS transforms
 */
.child-with-unknown-dimensions {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/**
 * Absolutely center the element in its parent
 * Width is passed to the mixin, so we rely on a negative margin for the
 * horizontal axis and CSS transforms for the vertical axis
 */
.child-with-known-width {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  transform: translateY(-50%);
  width: 400px;
}

/**
 * Absolutely center the element in its parent
 * Height is passed to the mixin, so we rely on a negative margin for the
 * vertical axis and CSS transforms for the horizontal axis
 */
.child-with-known-height {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  transform: translateX(-50%);
  height: 400px;
}

/**
 * Absolutely center the element in its parent
 * Width is passed to the mixin, so we rely on a negative margins for both
 * horizontal axis and vertical axis
 */
.child-with-known-dimensions {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin: -200px 0 0-200px;
}