Вертикальное выравнивание центра в Bootstrap 4

Question

Вертикальное выравнивание центра в Bootstrap 4

Я пытаюсь центрировать свой контейнер в середине страницы с помощью Bootstrap 4. До сих пор мне это не удавалось. Любая помощь будет оценена по достоинству.

Я построил его в Codepen.io так что вы, ребята, можете играть с ним и дайте мне знать, что работает, как я о из идей...

Edit - [ответ]

добавление следующего в верхней части моего CSS Исправлена проблема:

html, body {
  height:100%;
}
body {
  display:flex;
  align-items:center;
}

кроме того, в Bootstrap 4:

добавлять классы d-flex align-items-center h-100 для родителя также решает проблему и является более Bootstrappy подход. Обратите внимание, что это делает то же самое, что и вышеупомянутый подход.

решена благодаря @Pete, @ZimSystems, а также другие

7 118

html css flexbox twitter-bootstrap bootstrap-4

7 ответов:

вы можете вертикально выровнять контейнер, сделав родительский контейнер гибким и добавив align-items:center:
body {
  display:flex;
  align-items:center;
}
Обновленная Ручка

10

следующие классы bootstrap 4 помогли мне решить эту проблему
<div class="col text-center justify-content-center align-self-center">
    <img width=3rem src=".." alt="...">
</div>

8

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

5

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

изменить выравнивание элементов с вертикальное выравнивание коммунальные услуги. Обратите внимание, что вертикальное выравнивание влияет только на inline, inline-block,inline-table и ячейка таблицы элементы.

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

3

В 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

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

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

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

0

Zim · Accepted Answer · 2018-10-10 14:17:20

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

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

теперь, на вертикальное центрирование в 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 на основе родительского элемента (.row is 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 на основе родительского элемента (.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 вертикально-центр .
<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>
Вертикальный Центр Различной Высоты Столбцов демо

3-Вертикальный Центр С Помощью Дисплея Utils:

Bootstrap 4 имеет отображение utils это может быть использовано для display:table,display:table-cell,display:inline и т. д.. Они могут быть использованы с вертикальное выравнивание utils для выравнивания ячейки inline, inline-block или таблицы элементы.
<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>
Вертикальный Центр С Помощью Дисплея Utils демо

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

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

помните, что вертикальное центрирование относительно высота родителя элемент. Если вы хотите сосредоточиться на всей странице, в большинстве случаев это должен быть ваш CSS...
body,html {
  height: 100%;
}
если вы хотите центрировать дочерний элемент внутри родительского. Родитель должен иметь определенный высота.

Смотрите также:
вертикальное выравнивание в bootstrap 4
Bootstrap 4 Центр вертикальное и горизонтальное выравнивание