Для того, чтобы сделать вертикальное выравнивание в CSS необходимо определить родительский элемент, относительно которого будет выровнен дочерний элемент.
Во всех приведенных ниже способах будем использовать следующую разметку HTML:
<div class="parent">
<div class="child">Некоторый тект</div>
</div>
Вертикальное выравнивание через display: table
В этом способе нам просто нужно представить родителя в виде таблицы, а дочерний элемент — соответственно в виде ячейки этой таблицы. Тогда, задав свойство дочернему элементу vertical-align: middle, мы решаем нашу задачу.
.parent{display: table;
}
.child{display: table-cell;vertical-align: middle;
}
Выравнивание по вертикали с применением технологии Flex
Здесь все просто: указываем родителю свойство flex, и способы выравнивания. При этом дополнительные свойства дочернему элементу задавать не требуется.
.parent{display: flex;align-item: center;
# Выравнивание по центру
justify-content: center;
}
Технология Grid
Сегодня почти все современные браузеры поддерживают Grid, что делает возможным использование этой технологии в разработке своих приложений.
В случае с Grid вертикальное выравнивание работает также, как и во Flex.
.parent{display: grid;align-item: center;
# Выравнивание по центру
justify-content-: center;
}
Однако Grid позволяет сделать вертикальное и горизонтальное выравнивание используя только одно свойство place-items: center.
.parent{display: grid;place-items: center;
}
Grid и margin
Второй способ с использованием grid
.parent{display: grid;
}
.child{margin: auto;
}
Как выровнять элемент с абсолютным позиционированием?
В тех случаях, когда child является абсолютным, можно применить такой метод:
.parent{position: relative;
}
.child{position: absolute;left: 50%;transform: translateY(-50%);
}
Заключение
Безусловно существуют и другие способы решения, но в приведенные пять способов покроют 99% всех возникающих задач по вертикальному выравниванию. Если у Вас есть свои соображения, пишите, будет рады вашим коментариям. Также делитесь материалом с друзьями или коллегами в своих соцсетях.