Центрирующая смесь - CSS-хитрости

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

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

.parent ( position: relative; ) .child ( @include centerer; )

См. Миксин Pen Centerer от Криса Койера (@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 Криса Койера (@chriscoyier) на CodePen.