Aangenomen dat het bovenliggende element heeft position: relative;, zullen deze vier eigenschappen een onderliggend element zowel horizontaal als verticaal binnenin centreren, ongeacht de breedte of hoogte van beide.
@mixin centerer ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ).parent ( position: relative; ) .child ( @include centerer; )Zie de Pen Centerer Mixin van Chris Coyier (@chriscoyier) op CodePen.
Hoewel pas op als het onderliggende element dat wordt gecentreerd groter is dan het bovenliggende element, kan de bovenkant worden afgesneden.
Liefhebber
Als je in slechts één richting wilt kunnen centreren ...
@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%); ) )Zie de Pen yybgZd door Chris Coyier (@chriscoyier) op CodePen.