Pod pretpostavkom da roditeljski element ima position: relative;, ova će četiri svojstva centrirati podređeni element vodoravno i okomito unutra, bez obzira na širinu visine bilo kojeg od njih.
@mixin centerer ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ).parent ( position: relative; ) .child ( @include centerer; )Pogledajte Pen Centerer Mixin Chrisa Coyiera (@chriscoyier) na CodePenu.
Iako se pripazite ako je podređeni element koji je centriran viši od nadređenog, vrh bi mogao biti odsječen.
Ljubitelj
Ako želite centrirati samo u jednom smjeru ...
@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%); ) )Pogledajte Pen yybgZd Chrisa Coyiera (@chriscoyier) na CodePenu.