it-roy-ru.com

Центр выравнивания по вертикали в Bootstrap 4

Я пытаюсь центрировать мой Контейнер по центру страницы, используя Bootstrap 4.

212
canaan seaton

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

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

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

Вы можете использовать новые flexbox & size utilities , чтобы сделать 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 parent (.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>

enter image description here

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

Вариант 3 justify-content-center на flexbox parent (.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:

vertical center grid columns

Поскольку 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 utils , который может использоваться для 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 in .container
Вертикальный центр и низ в <div>
Вертикальный центр ребенка внутри родителя
вертикальный центр полноэкранного jumbotron


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

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

body,html {
  height: 100%;
}

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

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

439
Zim

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

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

обновленная ручка

16
Pete

Следующие bootstrap 4 класса помогли мне решить эту проблему

<div class="col text-center justify-content-center align-self-center">
    <img width=3rem src=".." alt="...">
</div>
12
Manoj
.jumbotron {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
7
Nate Beers

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

Цель: вертикальное и горизонтальное выравнивание элемента div на странице с помощью классов bootstrap 4 flexbox.

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

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

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

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

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

Обратите внимание, что нет никакого специального класса, который должен быть установлен на самом центрированном 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>
7
Greg Gum

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

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

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

4
vallismortis
<!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>
2
Anu

Я сделал это так с 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>
1
webjay

В Bootstrap 4.1.3:

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

То, что сработало, было несколько простых CSS:

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

или же

<span class="badge badge-pill" style="vertical-align: 50%;">My Badge</span>
0
phyatt
<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">Today’s 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>

enter image description here

0
Tariqul_Islam

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

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

0
AlexNikonov