Выравнивание блока по центру
Предположим, что у родительский элемент имеет свойство position: relative;, следующие четыре свойства выравнивают блок по центру горизонтально и вертикально, независимо от размеров блока.
1 2 3 4 5 6 | @mixin centerer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } |
1 2 3 4 5 6 | .parent { position: relative; } .child { @include centerer; } |
Если блок, который вы выравниваете будет по высоте больше блока родителя, то он обрежется.
Мы можем использовать условный оператор if, чтобы создать миксин, который будет выравнивать блок в заданном направлении. Чтобы указать направление, определите переменные $horizontal: true и $vertical: true .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | @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%); } } |