Как вертикально центрировать контейнер в Bootstrap?

Я ищу способ вертикального containerцентрирования div внутри jumbotronи установки его в середине страницы.

Он .jumbotronдолжен быть адаптирован к полной высоте и ширине экрана. .containerDIV имеет ширину 1025pxи должен быть в середине страницы ( по вертикали в центре).

Я хочу, чтобы на этой странице был адаптирован jumbotron к высоте и ширине экрана вместе с контейнером, вертикально центрированным по отношению к jumbotron. Как мне этого добиться?

.jumbotron {
  height:100%;
  width:100%;
}
.container {
  width:1025px;
}
.jumbotron .container {
  max-width: 100%;
} 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
    <div class="container text-center">
        <h1>The easiest and powerful way</h1>
        <div class="row">
            <div class="col-md-7">
                 <div class="top-bg"></div>
            </div>

            <div class="col-md-5 iPhone-features" style="margin-left:-25px;">
                <ul class="top-features">
                    <li>
                        <span><i class="fa fa-random simple_bg top-features-bg"></i></span>
                        <p><strong>Redirect</strong><br>Visitors where they converts more.</p>
                    </li>
                    <li>
                        <span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
                        <p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
                    </li>
                    <li>
                        <span><i class="fa fa-check simple_bg top-features-bg"></i></span>
                        <p><strong>Check</strong><br>Constantly the status of your links.</p>
                    </li>
                    <li>
                        <span><i class="fa fa-users simple_bg top-features-bg"></i></span>
                        <p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
                    </li>
                        <a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
                        <h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
                </ul>
            </div>
        </div>
    </div>
</div>

Гибкий коробочный способ

Выравнивание по вертикали теперь очень просто благодаря использованию гибкого макета коробки . В настоящее время этот метод поддерживается в широком диапазоне веб - браузеров , за исключением Internet Explorer 8 и 9. Поэтому мы должны были бы использовать некоторые хаки / polyfills или различные подходы для IE8 / 9.

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

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

Пример здесь ( Зеркало на 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;
}

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

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

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

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

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

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

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

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

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

Во встроенном потоке встроенный элемент уровня может быть выровнен вертикально к середине vertical-align: middleобъявлением. Спекуляция от W3C :

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

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

Собираем все вместе

При этом мы могли бы создать элемент полной высоты внутри элементов .vertical-centerby ::beforeили ::afterpseudo, а также изменить displayтип по умолчанию для него и другого дочернего элемента - .containerto 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;
}

РАБОЧАЯ ДЕМО .

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

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

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

И вот еще:

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

Обновление 2019

Bootstrap 4 включает в себя flexbox, поэтому метод вертикального центрирования намного проще и не требует дополнительного CSS .

Просто используйте d-flexи align-items-centerполезные классы ..

<div class="jumbotron d-flex align-items-center">
  <div class="container">
    content
  </div>
</div>

http://www.codeply.com/go/ui6ABmMTLv

Важно: вертикальное центрирование относительно высоты . Родительский контейнер элементов, которые вы пытаетесь центрировать, должен иметь определенную высоту . Если вы хотите высоту страницы используйте vh-100или min-vh-100на родительском! Например:

<div class="jumbotron d-flex align-items-center min-vh-100">
  <div class="container text-center">
    I am centered vertically
  </div>
</div>

добавь Bootstrap.css и добавь это в свой css

   
html, body{height:100%; margin:0;padding:0}
 
.container-fluid{
  height:100%;
  display:table;
  width: 100%;
  padding: 0;
}
 
.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
 
 

.centering {
  float:none;
  margin:0 auto;
}

Now call in your page 

<div class="container-fluid">
    <div class="row-fluid">
        <div class="centering text-center">
           Am in the Center Now :-)
        </div>
    </div>
</div>

В Bootstrap 4 :

чтобы отцентрировать ребенка по горизонтали , используйте класс bootstrap-4:

justify-content-center

чтобы центрировать ребенка по вертикали , используйте класс bootstrap-4:

 align-items-center

но помните, не забывайте использовать класс d-flex с этим, это служебный класс bootstrap-4, вот так

<div class="d-flex justify-content-center align-items-center" style="height:100px;">
    <span class="bg-primary">MIDDLE</span>    
</div>

Примечание: обязательно добавьте утилиты bootstrap-4, если этот код не работает

Я знаю, что это не прямой ответ на этот вопрос, но это может помочь кому-то

Моя предпочтительная техника:

body {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

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

демонстрация

body {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="jumbotron vertical-center">
  <div class="container text-center">
    <h1>The easiest and powerful way</h1>
    <div class="row">
      <div class="col-md-7">
        <div class="top-bg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
      </div>

      <div class="col-md-5 iPhone-features">
        <ul class="top-features">
          <li>
            <span><i class="fa fa-random simple_bg top-features-bg"></i></span>
            <p><strong>Redirect</strong><br>Visitors where they converts more.</p>
          </li>
          <li>
            <span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
            <p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
          </li>
          <li>
            <span><i class="fa fa-check simple_bg top-features-bg"></i></span>
            <p><strong>Check</strong><br>Constantly the status of your links.</p>
          </li>
          <li>
            <span><i class="fa fa-users simple_bg top-features-bg"></i></span>
            <p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
          </li>
          <a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
          <h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
        </ul>
      </div>
    </div>
  </div>
</div>

Смотрите также эту скрипку !

Протестировано в IE, Firefox и Chrome.

.parent-container {
    position: relative;
    height:100%;
    width: 100%;
}

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

<div class="parent-container">
    <div class="child-container">
        <h2>Header Text</h2>
        <span>Some Text</span>
    </div>
</div>

Найдено на https://css-tricks.com/centering-css-complete-guide/

для bootstrap4 вертикальный центр из нескольких предметов

d-flex для правил flex

flex-column для вертикального направления на предметах

justify-content-center для центрирования

style = 'height: 300px;' должен иметь для заданных точек, где центр будет рассчитываться или использовать класс H-100

тогда для горизонтального центра div d-flex justify-content-center и некоторый контейнер

Итак, у нас есть иерархия из 3 тегов: div-column -> div-row -> div-container

     <div class="d-flex flex-column justify-content-center bg-secondary" 
        style="height: 300px;">
        <div class="d-flex justify-content-center">
           <div class=bg-primary>Flex item</div>
        </div>
        <div class="d-flex justify-content-center">
           <div class=bg-primary>Flex item</div>
        </div>
      </div> 

Если вы используете Bootstrap 4, вам просто нужно добавить 2 div:

.jumbotron{
  height:100%;
  width:100%;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>    
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<body>
  <div class="jumbotron">
    <div class="d-table w-100 h-100">
      <div class="d-table-cell w-100 h-100 align-middle">
        <h5>
          your stuff...
        </h5>
        <div class="container">
          <div class="row">
            <div class="col-12">
              <p>
                More stuff...
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Классы: d-table, d-table-cell, w-100, h-100 и align-middle сделают эту работу

Дайте контейнер класса

.container{
    height: 100vh;
    width: 100vw;
    display: flex;
}

Дайте div, который находится внутри контейнера:

align-content: center;

Весь контент внутри этого div будет отображаться в середине страницы.

Вот способ, которым я пользуюсь для выравнивания контента по вертикали - верх / центр / низ с начальной загрузкой 3 ряда. Начальная загрузка 3 столбца одинаковой высоты и выровнены по вертикали.

/* columns of same height styles */

.row-full-height {
  height: 100%;
}
.col-full-height {
  height: 100%;
  vertical-align: middle;
}
.row-same-height {
  display: table;
  width: 100%;
  /* fix overflow */
  table-layout: fixed;
}
.col-xs-height {
  display: table-cell;
  float: none !important;
}

@media (min-width: 768px) {
  .col-sm-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 992px) {
  .col-md-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 1200px) {
  .col-lg-height {
    display: table-cell;
    float: none !important;
  }
}
/* vertical alignment styles */

.col-top {
  vertical-align: top;
}
.col-middle {
  vertical-align: middle;
}
.col-bottom {
  vertical-align: bottom;

<div class="container">

<h2>Demo 1</h2>
<div class="row">
  <div class="row-same-height">
    <div class="col-xs-3 col-xs-height">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus tincidunt porttitor. Praesent vehicula aliquam enim. Fusce non luctus eros, sit amet consequat velit. Pellentesque volutpat est et est imperdiet pharetra. Integer vestibulum feugiat malesuada. Proin a felis ut libero vestibulum fermentum ut sit amet est. Morbi placerat eget lacus sed sagittis. Nullam eu elit gravida arcu viverra facilisis. Quisque laoreet enim neque, ut consequat sem tincidunt at. Fusce lobortis scelerisque libero, eget vulputate neque. </div>
    <div class="col-xs-3 col-xs-height col-top">2st column</div>
    <div class="col-xs-3 col-xs-height col-middle">3st column</div>
    <div class="col-xs-3 col-xs-height col-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus tincidunt porttitor. Praesent vehicula aliquam enim. Fusce non luctus eros, sit amet consequat velit. Pellentesque volutpat est et est imperdiet pharetra.</div>
  </div>
</div><!-- ./row -->
</div><!-- ./container -->

Вот демоверсия JSFiddle .