Центрирование элемента неопределенной высоты по вертикали относительно родительского блока - частая проблема начинающих разработчиков. Давайте рассмотрим пример, в котором, не прибегая к flex или table, с помощью всего трех строк кода CSS мы сможем центрировать по вертикали элемент неопределенной высоты с любым содержимым относительно родительского блока.

Свойство transform обычно используется для ротации или масштабирования элементов, но его функция translateY() позволяет изменять положение блока по вертикали.

Итак, все что нам нужно для выравнивания по вертикали (даже если мы не знаем высоту элементов):

.element{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Этот метод похож на прием с абсолютным позиционрованием, но в данном случае нам не нужно дописывать никаких свойств для родительского элемента. И еще, он работает, как есть - “из коробки” даже в Internet Explorer 9.

Сделаем миксин и добавим (при необходимости) префиксы для старых версий браузеров:

@mixin vertical-align($position: relative) {
    position: $position;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.element p {
    @include vertical-align();
}

В некоторых случаях этот метод приводит к визуальному размытию границ блока из-за так называемого “эффекта полупикселя”. Существуют два решения такой проблемы.

Можно задать preserve-3d для родительского блока:

.parent-element {
    transform-style: preserve-3d;
}

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

или добавить функцию perspective() для целевого элемента:

.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}

Спасибо за внимание.