Умное центрирование контейнера по центру страницы с использованием CSS3 flexbox

August 10, 2015

project5

Погуглив можно найти много способов центрирования контейнера, я лишь опишу вариант как это можно сделать с помощью CSS3.
Основной контейнер (main) будет равняться ширине и высоте окна браузера, для этого устанавливаем минимальную высоту в 100% и добавляем 3 основных свойства для выравнивания по горизонтали.

main {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  resize: vertical;
}

Внутри у нас будет контейнер с контентом, CSS для этого контейнера будет такой:

section {
  width: 700px;
  padding: 50px;
  margin: 0 auto;
  color: ‪#‎fff;
}

В итоге мы получаем контейнер, который располагается точно по центру страницы как вертикально, так и горизонтально.
Главный плюс этого способа центрирования следующий: основной контейнер по высоте никогда не будет меньше контейнера
с контентом.

Демо: http://codepen.io/anon/pen/NqoLoe