Flexbox является относительно новым дополнением CSS, с помощью которого можно достаточно легко решить одну извечную проблему центровки элементов по вертикали и горизонтали. При этом прописав только три строки кода! Этот прием работает во всех современных браузерах — Internet Explorer 10 +, Chrome, Firefox и Safari (с префиксом -webkit-). Советую также почитать более подробно о flexbox.
See the Pen GppjYO by Dmitry (@xozblog) on CodePen.
Разметка
Во-первых, мы создаем контейнер, в котором будем центрировать элементы:
1 2 3 4 | <div class="container"> <!-- Здесь мы располагаем любой контент--> <img src="fireworks.jpg" alt="fireworks"> </div> |
CSS
Как и обещал ранее, используем только три строки кода. Вот они:
1 2 3 4 5 | .container{ display: flex; justify-content: center; align-items: center; } |
Каждый flex-контейнер имеет две оси для позиционирования. Направление главной оси объявляется в свойстве flex-direction (row (значение по умолчанию): слева направо; row-reverse: справа налево; column: сверху вниз; column-reverse: снизу вверх). Опуская это правило, мы оставили для flex-direction его значения по-умолчанию.
Теперь все, что нам нужно сделать, это отцентровать по обоим осям:
- Задаем значение flex для свойства display — активируем режим flexbox;
- justify-content — определяет выравнивание по главной оси (горизонтально, в нашем случае);
- align-items — делает то же самое с осью, перпендикулярной к основной (по вертикали в нашем случае).
Источник статьи/урока: https://xozblog.ru
По материалам: http://tutorialzine.com/2015/09/quick-tip-the-simplest-way-to-center-elements-vertically-and-horizontally/