Центр вертикального выравнивания в бутстрапе 4

Ответ 1

Важно! Вертикальныйцентр относительно высоты родительского элемента

Если родительский элемент элемента, который вы пытаетесь отцентрировать, не имеет определенного высота, ни одно из решений вертикального центрирования не будет работать!

Теперь перейдем к вертикальному центру в Bootstrap 4...

Вы можете использовать новый flexbox & Размер утилиты, чтобы сделать container полной высоты и display: flex. Эти параметры не требуют дополнительного CSS (за исключением того, что высота контейнера (т.е. Html, body) должна составлять 100%).

Вариант 1 align-self-center для flexbox child

<div class="container d-flex h-100">
    <div class="row justify-content-center align-self-center">
     I'm vertically centered
    </div>
</div>

https://www.codeply.com/go/fFqaDe5Oey

Вариант 2 align-items-center для родительского элемента flexbox (.row - display:flex; flex-direction:row)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="jumbotron">
                I'm vertically centered
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/BumdFnmLuk

Вариант 3 justify-content-center для родительского элемента flexbox (.card - display:flex;flex-direction:column)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="card h-100 border-primary justify-content-center">
                <div>
                    ...card content...
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/3gySSEe7nd

Подробнее о Bootstrap 4 Вертикальное центрирование

Теперь, когда Bootstrap 4 предлагает flexbox и другие утилиты, существует множество подходов к вертикали. выравнивание. http://www.codeply.com/go/WG15ZWC4lf

1 - вертикальный центр с использованием авто полей:

Другой способ вертикального центрирования - использовать my-auto. Это будет центрировать элемент внутри контейнера. Например, h-100 делает строку полной высоты, а my-auto будет вертикально центрировать столбец col-sm-12.

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

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

my-auto представляет поля на вертикальной оси Y и эквивалентно:

margin-top: auto;
margin-bottom: auto;

2 - Вертикальный центр с Flexbox:

Поскольку Bootstrap 4 .row теперь является display:flex, вы можете просто использовать align-self-center в любом столбце для его вертикального центрирования...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

или используйте align-items-center на всем .row, чтобы выровнять по центру все col-* по вертикали в ряду...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Вертикальный центр столбцов различной высоты Демонстрация

Посмотрите это Q/A по центру, но сохраняйте равную высоту

3 - Вертикальный центр с использованием утилит дисплея:

Bootstrap 4 имеет утилиты отображения, которые можно использовать для display:table, display:table-cell, display:inline и т.д. Они могут использоваться с утилитами вертикального выравнивания для выравнивания по линии, элементы встроенного блока или ячейки таблицы.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Вертикальный центр с использованием утилиты отображения Демонстрация

Больше примеров
Вертикальное центральное изображение в <div>
Вертикальный центр .row в .container
Вертикальный центр и дно в <div>
Вертикальный центр ребенка внутри родителя
Вертикальный центр полноэкранного jumbotron

Важно! Яупоминал рост?

Помните, что вертикальное центрирование относительно высоты родительского элемента. Если вы хотите сосредоточиться на всей странице, в большинстве случаев это должен быть ваш CSS...

body,html {
  height: 100%;
}

Или используйте min-height: 100vh (min-vh-100 в Bootstrap 4. 1+) на родительском/контейнере. Если вы хотите центрировать дочерний элемент внутри родителя. Родитель должен иметь определенную высоту.

Также см.:
Вертикальное выравнивание в начальной загрузке 4
Bootstrap 4 по центру вертикального и горизонтального выравнивания

Ответ 2

вы можете вертикально выровнять свой контейнер, создав контейнер родительского контейнера и добавив align-items:center:

body {
  display:flex;
  align-items:center;
}

Обновлено перо

Ответ 3

После начальной загрузки 4 класса помогли мне решить эту проблему

<div class="col text-center justify-content-center align-self-center">
    <img width=3rem src=".." alt="...">
</div>

Ответ 4

Поскольку ни один из вышеперечисленных не работал для меня, я добавляю еще один ответ.

Цель: вертикально и горизонтально выровнять div на странице, используя классы bootbox 4-го класса.

Шаг 1: Установите свой внешний div на высоту 100vh. Это устанавливает высоту до 100% высоты Veiwport. Если вы этого не сделаете, больше ничего не получится. Установка его на высоту 100% относится только к родительскому, поэтому, если родительский элемент не является полной высотой окна просмотра, ничего не будет работать. В приведенном ниже примере я установил Body на 100vh.

Шаг 2. Установите контейнер контейнера в контейнер flexbox с классом d-flex.

Шаг 3: Центр div горизонтально с классом justify-content-center.

Шаг 4: Центрируйте div по вертикали с align-items-center

Шаг 5: Запустите страницу, просмотрите свой вертикальный и горизонтально-центрированный div.

Обратите внимание, что нет специального класса, который должен быть установлен на самом центре с центром (дочерний div)

<body style="background-color:#f2f2f2; height:100vh;">

<div class="h-100 d-flex justify-content-center align-items-center">
    <div style="height:600px; background-color:white; width:600px;">
</div>

</div>

</body>

Ответ 5

.jumbotron {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Ответ 6

В Bootstrap 4 (бета) используйте align-middle. См. Бутстрап 4 Документация по вертикальному выравниванию:

Измените выравнивание элементов с помощью вертикального выравниваниякоммунальные услуги. Обратите внимание, что вертикальное выравнивание влияет только на встроенный, встроенный блок, встроенный и элементы таблицы.

Выберите .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom и .align-text-top по мере необходимости.

Ответ 7

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>  
<div class="container">
    <div class="row align-items-center justify-content-center" style="height:100vh;">     
         <div>Center Div Here</div>
    </div>
</div>
</body>
</html>

Ответ 8

<div class="col-lg-5 col-sm-5 offset-1 d-flex">
            <div class="offer-txt justify-content-center align-self-center">
                <span class="inner-title">Our Offer</span>
                <h2 class="section-title">Todays Special </h2>
                <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly.</p>
            </div>
        </div>

Ответ 9

Я сделал это с помощью Bootstrap 4.3.1:

<div class="d-flex vh-100">
  <div class="d-flex w-100 justify-content-center align-self-center">
    I'm in the middle
  </div>
</div>

Ответ 10

Я попробовал все ответы здесь, но обнаружил здесь разницу между h-100 и vh-100. Вот мое решение:

      <div className='container vh-100 d-flex align-items-center col justify-content-center'>
        <div className="">
             ...
        </div>
      </div >

Ответ 11

/* Вы должны добавить высоту 100vh */

Ответ 12

<div class="row">
  <div class="col-md-6">
     <img src="/assets/images/ebook2.png" alt="" class="img-fluid">
  </div>
  <div class="col-md-6 my-auto">
     <h3>Heading</h3>
     <p>Some text.</p>
   </div>
</div>

В этой строке происходит волшебство <div class="col-md-6 my-auto">, my-auto будет центрировать содержимое столбца. Это прекрасно работает в таких ситуациях, как приведенный выше пример кода, где у вас может быть изображение переменного размера, и вам нужно, чтобы текст в столбце находился справа от него.

Ответ 13

В Bootstrap 4.1.3:

Это работало для меня, когда я пытался центрировать значок начальной загрузки внутри container > row > column рядом с заголовком h1.

Что делало простую css:

.my-valign-center {
  vertical-align: 50%;
}

или же

<span class="badge badge-pill" style="vertical-align: 50%;">My Badge</span>

Ответ 14

используйте .my-auto (bootsrap4) класс CSS на вашем Div