Zakładając, że element nadrzędny ma position: relative;, te cztery właściwości wyśrodkują element podrzędny zarówno w poziomie, jak i w pionie wewnątrz, bez względu na szerokość obu elementów.
@mixin centerer ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ).parent ( position: relative; ) .child ( @include centerer; )Zobacz Pen Centerer Mixin autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.
Chociaż uważaj, jeśli wyśrodkowany element podrzędny jest wyższy niż element nadrzędny, góra może zostać odcięta.
Hodowca
Jeśli chcesz mieć możliwość wyśrodkowania tylko w jednym kierunku…
@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%); ) )Zobacz Pen yybgZd autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.