Angenommen, das übergeordnete Element hat position: relative;, zentrieren diese vier Eigenschaften ein untergeordnetes Element sowohl horizontal als auch vertikal im Inneren, unabhängig von der Höhe der Höhe.
@mixin centerer ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ).parent ( position: relative; ) .child ( @include centerer; )Siehe das Pen Centerer Mixin von Chris Coyier (@chriscoyier) auf CodePen.
Obwohl Vorsicht geboten ist, wenn das untergeordnete Element, das zentriert wird, größer als das übergeordnete Element ist, kann die Oberseite abgeschnitten werden.
Liebhaber
Wenn Sie nur in eine 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.