Как по центру выровнять по вертикали контейнер в начальной загрузке

Гибкий способ коробки

Вертикальное выравнивание теперь очень просто с помощью Гибкая компоновка ящиков. В настоящее время этот метод поддерживается в широком диапазоне веб-браузеров, кроме Internet Explorer 8 и 9. Поэтому нам нужно будет использовать некоторые хаки /a href= "https://github.com/doctyper/flexie" rel= "noreferrer" > polyfills или различные подходы для IE8/9.

В дальнейшем я покажу вам, как это сделать только в 3 строках текста (независимо от старого синтаксиса flexbox).

Примечание. лучше использовать дополнительный класс вместо изменения .jumbotron для достижения вертикального выравнивания. Например, я бы использовал имя класса vertical-center.

Пример здесь (A Зеркало на jsbin).

<div class="jumbotron vertical-center"> <!-- 
                      ^--- Added class  -->
  <div class="container">
    ...
  </div>
</div>

.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

Важные примечания (рассматривается в демонстрации):

• Процентные значения свойств height или min-height относятся к height родительского элемента, поэтому вы должны явно указать height родителя.

• Синтаксис поставщика с префиксом/старый flexbox опущен в опубликованном фрагменте из-за краткости, но существует в онлайн-примере.

• В некоторых старых веб-браузерах, таких как Firefox 9 ^{(в которых я тестировал)} контейнер flex - .vertical-center в этом случае - не займет свободного места внутри родителя, поэтому нам нужно указать свойство width как: width: 100%.

• Также в некоторых веб-браузерах, как указано выше, элемент flex - .container в этом случае - может не отображаться в центре по горизонтали. Кажется, что примененный left/right margin of auto не влияет на элемент flex.
  Поэтому нам нужно выровнять его на box-pack / justify-content.

Для получения дополнительной информации и/или вертикального выравнивания столбцов вы можете обратиться к теме ниже:

• вертикальное выравнивание с помощью Bootstrap 3

---

Традиционный способ для устаревших веб-браузеров

Это старый ответ, который я написал в то время, когда я ответил на этот вопрос. Этот метод обсуждался здесь, и он должен работать в Internet Explorer 8 и 9. Я объясню это короче:

В поточном потоке элемент встроенного уровня может быть выровнен по вертикали к середине с помощью vertical-align: middle. Spec из W3C:

среднего
Выровняйте вертикальную середину поля с базовой линией родительского поля плюс половину x-высоты родительского элемента.

В случае, если элемент parent - .vertical-center в этом случае - имеет явный height, случайно, если бы мы могли иметь дочерний элемент, имеющий точно такой же height родителя, мы могли бы чтобы переместить базовую линию родителя в середину полноразмерного ребенка и удивительно сделать нашего желаемого ребенка в потоке - .container - выровненным по центру по вертикали.

Общие сведения

Как сказано, мы могли бы создать элемент полной высоты в элементах .vertical-center на ::before или ::after, а также изменить тип по умолчанию display и другого дочернего элемента .container до inline-block.

Затем используйте vertical-align: middle; для выравнивания встроенных элементов по вертикали.

Здесь вы идете:

<div class="jumbotron vertical-center">
  <div class="container">
    ...
  </div>
</div>

.vertical-center {
  height:100%;
  width:100%;

  text-align: center;  /* align the inline(-block) elements horizontally */
  font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.vertical-center:before {    /* create a full-height inline block pseudo=element */
  content: " ";
  display: inline-block;
  vertical-align: middle;    /* vertical alignment of the inline element */
  height: 100%;
}

.vertical-center > .container {
  max-width: 100%;

  display: inline-block;
  vertical-align: middle;  /* vertical alignment of the inline element */
                           /* reset the font property */
  font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

РАБОЧИЙ ДЕМО.

Кроме того, чтобы предотвратить непредвиденные проблемы на дополнительных маленьких экранах, вы можете reset установить высоту псевдоэлемента в auto или 0 или изменить его тип display на none, если это необходимо:

@media (max-width: 768px) {
  .vertical-center:before {
    height: auto;
    /* Or */
    display: none;
  }
}

ОБНОВЛЕНО ДЕМО

И еще одно:

Если вокруг контейнера есть разделы footer/header, лучше разместить эти элементы (relative, absolute? до вас.) и добавить более высокое значение z-index (для гарантии), чтобы держать их всегда на вершине других.