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

168

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

Теги:
bootstrap-4
flexbox

10 ответов

329
Лучший ответ

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

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

Теперь вернемся к центру в Bootstrap 4...

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

Вариант 1 align-self-center на дочернем элементе flexbox

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

Изображение 2364

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

Вариант 3 justify-content-center для родительского .card flexbox (.card is 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 col-sm-12 высоту строки, а 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>

Вертикальный центр с использованием Auto Margins Demo

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

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

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

Изображение 2306

Поскольку Bootstrap 4 .row теперь display:flex вы можете просто использовать align-self-center в любом столбце, чтобы вертикально 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>

Вертикальный центр Использование дисплея Utils Demo

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

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

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

body,html {
  height: 100%;
}

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

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

Поделиться
  • 0
    При использовании выше на странице с навигационной панелью я получаю полосу прокрутки. Я думаю, что он добавляет 100% высоты ниже панели навигации и центрируется по ней. Как я могу это исправить?
  • 0
    Я пытаюсь выровнять несколько строк по центру с помощью flex box. Я хочу выровнять все кнопки по центру. codeply.com/go/5abdqC33cU
11

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

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

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

Поделиться
  • 1
    оооо, лол, я пропустил ссылку в описании ... вы также добавили html, body {height:100%} ... добавив, что заставило его работать! Спасибо!
9

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

<div class="col text-center justify-content-center align-self-center">
    <img width=3rem src=".." alt="...">
</div>
Поделиться
  • 1
    Это не центрировало мой div вертикально.
  • 0
    Можете ли вы уточнить ваш код CSS. поделитесь фрагментом этого, я бы посмотрел на проблему, с которой вы столкнулись.
6 
.jumbotron {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
Поделиться
3

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

Цель: вертикально и горизонтально выровнять 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>
Поделиться
  • 0
    Это работает с небольшими изменениями
  • 0
    @AjayKumar, Хотите поделиться своими модификациями?
3

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

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

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

Поделиться
0 
<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>

Изображение 2365

Поделиться
0

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

Центр
Поделиться
0 
<!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="/bootstrap.min.css">
  <script src="/jquery.min.js"></script>
  <script src="/popper.min.js"></script>
  <script src="/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>
Поделиться
  • 1
    Это сработало, но карта сократилась
  • 0
    @AjayKumar Добавление класса flex-grow-1 на карту предотвращает ее сжатие.
0

В 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>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню