Ob predpostavki, da ima nadrejeni element position: relative;, bodo te štiri lastnosti centrirale podrejeni element tako vodoravno kot navpično znotraj, ne glede na širino višine enega ali drugega.
@mixin centerer ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ).parent ( position: relative; ) .child ( @include centerer; )Oglejte si Pen Centerer Mixin Chrisa Coyierja (@chriscoyier) na CodePen.
Čeprav bodite pozorni, če je podrejeni element, ki je centriran, višji od nadrejenega, se lahko vrh odreže.
Ljubitelj
Če želite, da se lahko centrirate samo v eno smer ...
@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%); ) )Oglejte si Pen yybgZd Chrisa Coyierja (@chriscoyier) na CodePen.