Supponendo che l'elemento genitore abbia position: relative;, queste quattro proprietà centreranno un elemento figlio sia orizzontalmente che verticalmente all'interno, indipendentemente dalla larghezza dell'altezza di entrambi.
@mixin centerer ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ).parent ( position: relative; ) .child ( @include centerer; )Guarda il Pen Centerer Mixin di Chris Coyier (@chriscoyier) su CodePen.
Anche se fai attenzione se l'elemento figlio che viene centrato è più alto del genitore, la parte superiore potrebbe essere tagliata.
Più elaborato
Se vuoi essere in grado di centrare in una sola direzione ...
@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%); ) )Vedi Pen yybgZd di Chris Coyier (@chriscoyier) su CodePen.