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

Ответ 1

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

Вертикальное выравнивание теперь очень просто с помощью Гибкая компоновка ящиков. В настоящее время этот метод поддерживается в широком диапазоне веб-браузеров, кроме 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 (для гарантии), чтобы держать их всегда на вершине других.

Ответ 2

Обновление 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>

Ответ 3

добавьте 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>

Ответ 4

В 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, если этот код не работает

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

Ответ 5

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

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>

Ответ 6

Протестировано в 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>

Ответ 7

для 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> 

Ответ 8

Если вы используете 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>

Ответ 9

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