3 строки CSS для выравнивания по вертикали

Дата публикации: 2014-02-07

От автора: С помощью всего трех строк CSS (исключая вендорные префиксы) и transform: translateY можно выровнять по вертикали все, что угодно, даже не зная высоты элемента. Из этой статьи вы узнаете, как выровнять по вертикали что угодно с помощью трех строк CSS.

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

Итак, пишем:

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

.element {

position: relative;

top: 50%;

transform: translateY(-50%);

}

Вот и все, что нужно. Этот способ очень похож на метод абсолютного позиционирования absolute-position, но с тем преимуществом, что не нужно устанавливать ни элементу высоту, ни его родительскому элементу position-property. Этот метод изумительно работает даже в IE9!

Чтобы еще упростить, можно написать все как примесь-миксин с вендорными префиксами:

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

.element p {
  @include vertical-align;
}

@mixin vertical-align {

position: relative;

top: 50%;

-webkit-transform: translateY(-50%);

-ms-transform: translateY(-50%);

transform: translateY(-50%);

}

.element p {

@include vertical-align;

}

Или воспользоваться селектором Sass placeholder для уменьшения количества кода в производимом CSS:

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

.element p {
  @extend %vertical-align;
}