Mixin központosítása - CSS-trükkök

Feltételezve, hogy a szülő elem rendelkezik position: relative;, ez a négy tulajdonság mind a gyermek elemet vízszintesen, mind függőlegesen középre helyezi belül, függetlenül attól, hogy melyik magasság szélessége van.

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

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

Lásd Chris Coyier (@chriscoyier) Pen Centerer Mixinjét a CodePen-en.

Bár vigyázzon, ha a középre helyezett gyermekelem magasabb, mint a szülő, a teteje levágódhat.

Szakértő

Ha azt szeretné, hogy csak egy irányba tudjon középre állítani…

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

Lásd Chris Coyier (@chriscoyier) Pen yybgZd-jét a CodePen-en.