Eeldusel, et vanemelemendil on position: relative;, koondavad need neli omadust lapse elemendi nii horisontaalselt kui ka vertikaalselt, olenemata sellest, milline on kummagi kõrguse laius.
@mixin centerer ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ).parent ( position: relative; ) .child ( @include centerer; )Vaadake CodePenil Chris Coyieri (@chriscoyier) pliiatsikeskkonna mikserit.
Kuigi ole ettevaatlik, kui keskne lapseelement on vanemast kõrgem, võib ülemine osa ära lõigata.
Väljamõeldis
Kui soovite, et saaksite tsentreerida ainult ühes suunas ...
@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%); ) )Vaadake Code Cenilt Chris Coyieri (@chriscoyier) Pen yybgZd.