6 способов вертикального выравнивания с помощью CSS

Для вертикального выравнивания двух блоков будем использовать различные свойства CSS, такие как: таблицы, line-height, отрицательного margin, transform, псевдоэлемента и flexbox.

Очень часто при верстки приходится заниматься выравнивание объектов, один относительно другого. Чаще всего такая проблема присутствует для вертикального выравнивания, с горизонтальным более или менее все понятно. Есть несколько решений для выравнивания. Расмотрим пример.

<div class="inner">
        текст который должен быть выравнен по вертикале
</div>

Способ №1 с ипользованием line-height

div.inner {
    border      : 1px solid red;
    height      : 75px;
    line-height : 75px
}

Такое решение хорошо, когда блок по ширине больше чем содержимое. Такое решение вертикального выравнивания можно использовать для меню.

Вертикальное выравнивание

Если у нас блок будет уже, чем содержимое, то получится следующее

Вертикальное выравнивание с помощью CSS

Чтобы исправить эту проблему, есть два решения.

Способ №2 с использование display : table

Меняем код структуры, добавляем всего один блок

<div class="inner">
    <div>текст который должен быть выравнен по вертикале</div>
</div>

И теперь задаем display для обоих блоков. Для внешнего блока задаем display:table, для внутреннего задаем display:table-cell. Это необходимо с точки стандартов верстки. Ячейка без таблицы не может существовать

.inner {
    border  : 1px solid red;
    height  : 75px;
    width   : 200px;
    display : table
}

.inner div {
    display        : table-cell;
    vertical-align : middle
}

Используя правило vertical-align : middle, современные браузеры выравнивают текст внутри ячейки по вертикали.

Вертикальное выравнивание с помощью CSS

Это только два способа. Расcмотрим еще несколько методов выравнивания.

Способ №3 с абсолютно позиционирования и margin-top

Оставляем туже двух блочную структуру. В этом решении мы обманываем браузеры, говоря что внутри блока лежит строчный элемент, а не блок. Вот такой CSS:

.inner {
    position : relative;
    height   : 200px;
    width    : 200px;
    border   : 1px solid red
}

.inner div {
    position   : absolute;
    top        : 50%;
    height     : 50px;
    margin-top : -25px
}

Поведение объясняет очень просто. Из блока, который имеет фиксированные размеры, имеет вырезается блок, у которого не известны размеры. Все браузеры автоматически высчитывают его высоту. Соответственно мы сможем абсолютно спозиционировать блок внтури внешнего блока. Этот метод кстати подходит весьма успешно для многих задач по центрированию блоков с известной высотой.

Например, для центрирования изображения с неизвестными размерами в блоке с известными размерами или, например, горизонтальное выравнивание меню сделанного на структуре UL-LI.

Способ №4 с помощью transform

Представляет собой одно из самых универсальных способов, когда не знаете размеры родительского и дочернего элемента. В этом случае вместо задания отрицательного отступа в пикселях можно воспользоваться свойством transform и сдвинуть внутренний блок в центр с помощью функции translate и значения -50% -50%.

.outer {
    position: relative;
}

.inner {
    position  : absolute;
    top       : 50%;
    left      : 50%;
    transform : translate(-50%, -50%);
}

Решение №5 с помощью псевдоэлемента

Удобное решение для оформления, например, фотогалерей. Когда картнки имеют разные пропорции: квадратные, портретные и альбомные размеры.

Идея решения в добавлении внутри внешнего блока строчного блока высотой в 100% и задания ему вертикального выравнивания. В этом случае высота добавленного блока будет равна высоте внешнего блока. Внутренний блок выровняется по вертикали относительно добавленного, а значит, и внешнего блока.

.inner {
    display        : inline-block;
    vertical-align : middle;
    text-align     : center;
}
.outer:before {
    display        : inline-block;
    height         : 100%;
    vertical-align : middle;
    content        : "";
}

Этот способ не будет работать, если у родителя имеется абсолютное позиционирование.

Способ №6 с помощью Flexbox

Актуальный способ вертикального выравнивания это использовать Flexbox. Данное свойство позволяет гибко управлять позиционированием элементов на странице, располагая их практически как угодно. Выравнивание по центру для Flexbox — простая задача.

.outer {
    display : flex;
    width   : 200px;
    height  : 200px;
}
.inner {
    width  : 100px;
    margin : auto;
}

Flexbox актуален, но не забываем что, он поддерживается современными браузерами.

Источники:

  1. https://habr.com/ru/company/netcracker/blog/277433/
  2. https://habr.com/ru/post/71236/
  3. http://blog.sribna.com/vertikalnoe-vyiravnivanie-v-css-chast-2.htm
Начать проект вместе с нами
Заполните форму и отправьте
нам сообщение!
Если у Вас возникли вопросы, предложения, либо Вы желаете оформить заявку на заказ услуги — Добро пожаловать!
Контакты:
Бронзовые партнеры October CMS:
Chris standing up holding his daughter Elva