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

Я шукаю спосіб вертикального центру containerділити всередині jumbotronта встановити його посередині сторінки.

.jumbotronПовинно бути адаптоване до повної ширині і висоті екрану. .containerDIV має ширину 1025pxі повинен бути в середині сторінки ( по вертикалі в центрі).

Я хочу, щоб ця сторінка мала адаптер, пристосований до висоти та ширини екрана, а також контейнер, розташований по центру вертикально до джамботрона. Як я можу цього досягти?

.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. Тому нам потрібно використовувати деякі хаки / поліфілі або різні підходи для IE8 / 9.

Далі я покажу вам, як це зробити лише у 3 рядках тексту (незалежно від старого синтаксису флексокса) .

Примітка:.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. Префіксований / старий синтаксис флешбоку постачальника опущений у розміщеному фрагменті через стислість, але він існує в прикладі онлайн.

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

4. Також у деяких веб-браузерах, як згадувалося вище, елемент flex .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або ::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;
}

РОБОТА ДЕМО .

Крім того , щоб запобігти несподівані проблеми в додаткових невеликих екранах, ви можете скинути висоту псевдо-елемент 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 включає флексбокс, тому метод вертикального центрування набагато простіше і не вимагає додаткових 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

флекс-стовпчик для вертикального напрямку на елементах

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

style = 'висота: 300px;' Потрібно мати встановлені точки, де центр має бути обчислений або використовувати клас h-100

то для горизонтального центру div d-flex виправдайте 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 діви:

.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;
}

Дайте діву, який знаходиться в контейнері:

align-content: center;

Весь вміст цього діва відображатиметься посередині сторінки.

Ось спосіб, який я використовую для вирівнювання вмісту по вертикалі - вгорі / в центрі / знизу, завантажуючи 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 .