Ако приемем, че родителският елемент има 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.