Supondo que o elemento pai tenha position: relative;, essas quatro propriedades centralizarão um elemento filho tanto horizontalmente quanto verticalmente dentro, não importa qual seja a largura ou altura de cada um.
@mixin centerer ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ).parent ( position: relative; ) .child ( @include centerer; )Veja o Pen Centerer Mixin de Chris Coyier (@chriscoyier) no CodePen.
Embora tenha cuidado se o elemento filho sendo centralizado for mais alto que o pai, a parte superior pode ser cortada.
Mais chique
Se você quiser centralizar em apenas uma direção ...
@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%); ) )Veja a Pen yybgZd de Chris Coyier (@chriscoyier) no CodePen.