aurora-utilities 1.2.0

@mixin vertical-center()

Vertically centers an item with absolute positioning. Make sure parent is position: relative.

Examples

scss Sample Usage 
.box {
  position: relative;
}

.box__item--vertical-center {
  @include vertical-center;
}
css compiled 
.box {
  position: relative;
}

.box__item--vertical-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
html 
<div class="box">
  <div class="box__item box__item--vertical-center"></item>
</div>

@mixin horizontal-center()

Horizontally centers an item with absolute positioning. Make sure parent is position: relative.

Examples

scss Sample Usage 
.box {
  position: relative;
}

.box__item--horizontal-center {
  @include horizontal-center;
}
css compiled 
.box {
  position: relative;
}

.box__item--horizontal-center {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}
html 
<div class="box">
  <div class="box__item box__item--horizontal-center"></item>
</div>

@mixin absolute-center()

Horizontally and vertically centers an item with absolute positioning. Make sure parent is position: relative.

Examples

scss Sample Usage 
.box {
  position: relative;
}

.box__item--absolute-center {
  @include absolute-center;
}
css compiled 
.box {
  position: relative;
}

.box__item--absolute-center {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
html 
<div class="box">
  <div class="box__item box__item--absolute-center"></item>
</div>