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


322

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

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

Ответы:


675

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

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

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

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

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

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

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


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

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

body,html {
  height: 100%;
}

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

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


1
При использовании выше на странице с навигационной панелью я получаю полосу прокрутки. Я думаю, что он добавляет 100% высоты ниже панели навигации и центрируется по ней. Как я могу это исправить?
новое измерение

Я пытаюсь выровнять несколько строк по центру с помощью flex box. Я хочу выровнять все кнопки по центру. codeply.com/go/5abdqC33cU
кодер

Я подготовил кодовый блок, в настоящее время показывающий 3 способа центрирования на основе указанных здесь способов: codepen.io/yigith/pen/oNjmGEL
KodFun

23

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

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

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


1
оооо, лол, я пропустил ссылку в описании ... вы также добавили html, body {height:100%}... добавив, что сделал это работает! Спасибо!
место в Ханаане

1
Ваш ответ не решает проблему
заданным

1
Я полностью не согласен с вами, вы предлагаете обходной путь, несмотря на вопрос о том, как это сделать с классами Bootstrap.
AlexNikonov

@AlexNikonov нет, где в вопросе OP говорится, что они ограничены использованием только начальной загрузки - это альтернатива для других людей, которые могут попасть на эту страницу, желая вертикально выровнять вещи без использования классов начальной загрузки. Просто двигайтесь вперед - здесь есть множество других ответов. Я не понимаю, почему вы зацикливаетесь на этом - это форум для всех идей, которые могут помочь, а не только на отдельные ответы. Именно такие пользователи, как вы, портят этот сайт, подавляя ответы, которые предлагают решение проблемы, но только потому, что вам это не нравится
Пит

@AlexNikonov также, если вы прочитаете оригинальный неотредактированный пост (когда я добавлю свой ответ), вы также увидите, что OP пытался
Пит

23

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

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

1
Это не центрировало мой div вертикально.
рассвет

Можете ли вы уточнить ваш код CSS. поделитесь фрагментом этого, я бы посмотрел на проблему, с которой вы столкнулись.
Манодж

12

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

Цель: вертикальное и горизонтальное выравнивание элемента div на странице с помощью загрузочных классов 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>

@AjayKumar, Хотите поделиться своими модификациями?
Грег Гам

Спасибо, особенно 100vhтрюк мне очень помог. Bootstrap также предоставляет vh-100класс для этого.
Свенс


5

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

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

4

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

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

Выберите из .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, и .align-text-topв случае необходимости.


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

введите описание изображения здесь


твои фотки заставили меня задуматься о том, что стекопоток запустил рекламные объявления: D
AlexNikonov

4
<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будет центрировать содержимое столбца. Это прекрасно работает в таких ситуациях, как пример кода выше, где у вас может быть изображение переменного размера, и вам нужно, чтобы текст в столбце находился справа от него.


3

Я сделал это с помощью 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>

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

@AjayKumar Добавление flex-grow-1класса на карту предотвращает его сжатие.
Фред

1

Выравнивание по вертикали Используя этот класс начальной загрузки 4:

родитель: d-таблица

И

дочерний элемент: d-table-cell & align-middle & text-center

например:

<div class="tab-icon-holder d-table bg-light">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

и если вы хотите, чтобы родитель был кругом:

<div class="tab-icon-holder d-table bg-light rounded-circle">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

Какие два пользовательских класса CSS следующие:

.tab-icon-holder {
  width: 3.5rem;
  height: 3.5rem;
 }
.rounded-circle {
  border-radius: 50% !important
}

Окончательное использование может быть, например, таким:

<div class="col-md-5 mx-auto text-center">
    <div class="d-flex justify-content-around">
     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Xl.png" height="30rem">
       </div>
     </div>

     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Lg.png" height="30rem">
       </div>
     </div>

     ...

    </div>
</div>

0

Поместите ваш контент в контейнер flexbox, который имеет высоту 100%, т.е. h-100. Затем централизовать выравнивание контента с помощью класса justify-content-center .

<section class="container h-100 d-flex justify-content-center">
    <div class="jumbotron my-auto">
        <h1 class="display-3">Hello, Malawi!</h1>
    </div>
</section>


-2

В 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>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.