Suponiendo que el elemento padre tiene position: relative;, estas cuatro propiedades centrarán un elemento hijo tanto horizontal como verticalmente en el interior, sin importar el ancho o la altura de cualquiera de ellos.
@mixin centerer ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ).parent ( position: relative; ) .child ( @include centerer; )Vea el Pen Centerer Mixin de Chris Coyier (@chriscoyier) en CodePen.
Aunque tenga cuidado si el elemento secundario que se está centrando es más alto que el principal, la parte superior podría cortarse.
Criador
Si desea poder centrarse en una sola dirección ...
@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%); ) )Vea el Pen yybgZd de Chris Coyier (@chriscoyier) en CodePen.
