// ---
// title: Layout
// description: Classes and mixins for different layout options.
// ---

// Used on the *parent* element this causes the immediate child to center vertically/horizontally.

@mixin center--child {
  @include display(flex);
  @include align-items(center);
  @include justify-content(center);
}

.center--child {
  @include center--child;
}

// Used on any element to center it inside a parent that has a width/height.
// Element should be display:block with a width.

@mixin center--me($positioning: relative) {
  position: $positioning;
  top: 50%;
  left: 50%;
  @include transform(translateY(-50%) translateX(-50%));
}

.center--me--relative {
  @include center--me(relative);
}

.center--me--absolute {
  @include center--me(absolute);
}