Якщо припустити, що батьківський елемент має position: relative;, ці чотири властивості будуть центрувати дочірній елемент як горизонтально, так і вертикально всередині, незалежно від того, яка ширина висоти будь-якого з них.
@mixin centerer ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ).parent ( position: relative; ) .child ( @include centerer; )Дивіться Pen Centerer Mixin від Chris Coyier (@chriscoyier) на CodePen.
Хоча будьте обережні, якщо дочірній елемент, що центрується, вищий за батьківський, верхній може бути відрізаний.
Любитель
Якщо ви хочете мати можливість центруватись лише в одному напрямку ...
@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%); ) )Дивіться Pen yybgZd від Chris Coyier (@chriscoyier) на CodePen.