Центрирование Mixin онлайн урок.


Предполагая, что родительский элемент имеетposition: relative;, эти четыре свойства будут центрировать дочерний элемент как по горизонтали, так и по вертикали внутри, независимо от того, какова ширина их высоты.

@mixin centerer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.parent {
position: relative;
}
.child {
@include centerer;
}

Хотя будьте осторожны, если дочерний элемент, находящийся по центру, выше родителя, верхний элемент может быть отключен.

# Fancier

Если вы хотите иметь возможность центрировать только в одном направлении...

@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%);
}
}