Zentrier-Mixin

Unter der Annahme, dass das übergeordnete Element position: relative; hat, zentrieren diese vier Eigenschaften ein untergeordnetes Element sowohl horizontal als auch vertikal darin, unabhängig von der Breite oder Höhe von beiden.

@mixin centerer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.parent {
  position: relative;
}
.child {
  @include centerer;
}

Siehe den Pen Centerer Mixin von Chris Coyier (@chriscoyier) auf CodePen.

Aber Vorsicht, wenn das zu zentrierende untergeordnete Element höher ist als das übergeordnete, könnte oben etwas abgeschnitten werden.

Ausgefallener

Wenn Sie nur in einer Richtung zentrieren möchten…

@mixin centerer($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%);
  }
}

Siehe den Pen yybgZd von Chris Coyier (@chriscoyier) auf CodePen.