Как центрировать выравнивание по вертикали контейнера в bootstrap

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

The .jumbotron должен быть адаптирован к полной высоте и ширине экрана, поэтому я использовал этот CSS.

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

The .container div имеет ширину 1025px и должно быть в середине страницы (вертикально по центру).

.container{
  width:1025px;
}

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

мой HTML похож на

<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>    

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

7 ответов


гибкий путь окно

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

в следующем я покажу вам, как это сделать только в 3 строк of текст (независимо от старого синтаксиса 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;
}

важно Примечания (рассматривается в demo):

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

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

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

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

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


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

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

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

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

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

становится все вместе

это, как говорится, мы могли бы создать полноразмерный элемент в .vertical-center by ::before или ::after псевдо элементы, а также изменить по умолчанию display тип его и другого ребенка,.container to 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 значение (для гарантии), чтобы держать их всегда на вершине других.


добавить файл 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>

обновить 2018

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


на Bootstrap 4:

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

justify-content-center

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

 align-items-center

но помните, не забывайте использовать д-флекс класс с этими это служебный класс 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, Firfox и Chrome.

CSS:

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

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

HTML-код:

    <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/


вот как я использую для выравнивания контента по вертикали-сверху / по центру / снизу с помощью bootstrap 3 строки:

вот скрипка демо: в JS скрипку

Bootstrap 3 columns with same height and vertically aligned - 

/* 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 -->