Mišino centravimas - CSS-gudrybės

Darant prielaidą, kad pagrindinis elementas turi position: relative;šias keturias savybes, centre bus vaiko elementas tiek horizontaliai, tiek vertikaliai, nesvarbu, kurio aukščio plotis yra.

@mixin centerer ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); )

.parent ( position: relative; ) .child ( @include centerer; )

Žr. Chriso Coyierio (@chriscoyier) „Pen Centerer Mixin“ „CodePen“.

Nors saugokitės, jei centre esantis vaiko elementas yra aukštesnis nei tėvų, viršus gali būti nupjautas.

Mėgėjas

Jei norite, kad galėtumėte centruoti tik viena kryptimi ...

@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%); ) )

Žr. Chriso Coyier (@chriscoyier) „Pen yybgZd“ svetainėje „CodePen“.