Pieņemot, ka vecāku elementam ir position: relative;, šīs četras īpašības centrēs bērnu elementu gan horizontāli, gan vertikāli iekšpusē, neatkarīgi no tā, kāds no abiem ir augstuma platums.
@mixin centerer ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ).parent ( position: relative; ) .child ( @include centerer; )Skatiet Krista Koijera (@chriscoyier) Pen Centerer Mixin vietnē CodePen.
Kaut arī uzmanieties, ja centrētais bērna elements ir garāks par vecākiem, augšdaļa var tikt nogriezta.
Fancier
Ja vēlaties centrēt tikai vienā virzienā ...
@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%); ) )Skatiet Kriss Koijers (@chriscoyier) Pen yybgZd vietnē CodePen.