Za predpokladu, že má nadradený prvok position: relative;, tieto štyri vlastnosti vycentrujú podradený prvok horizontálne aj vertikálne vo vnútri, bez ohľadu na to, aká je šírka ich výšky.
@mixin centerer ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ).parent ( position: relative; ) .child ( @include centerer; )Prezrite si mixér Pen Centerer od Chrisa Coyiera (@chriscoyier) na stránke CodePen.
Aj keď pozor, ak je centrovaný podradený prvok vyšší ako rodič, horná časť by sa mohla odrezať.
Chovateľ
Ak chcete mať možnosť centrovať iba jedným smerom ...
@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%); ) )Prezrite si pero yybgZd od Chrisa Coyiera (@chriscoyier) na stránkach CodePen.