Под претпоставком да родитељски елемент има position: relative;, ова четири својства ће центрирати подређени елемент хоризонтално и вертикално унутра, без обзира на ширину висине било ког.
@mixin centerer ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ).parent ( position: relative; ) .child ( @include centerer; )Погледајте Пен Центерер Микин од Цхрис Цоииер (@цхрисцоииер) на ЦодеПен.
Иако се пазите ако је подређени елемент који је центриран виши од родитеља, врх би могао да се одсече.
Одгајивач
Ако желите да имате могућност центрирања у само једном смеру ...
@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%); ) )Погледајте Пен иибгЗд Цхриса Цоииера (@цхрисцоииер) на ЦодеПен.