Центр вертикальної вирівнювання у завантажувальній системі 4

Я намагаюся зосередити свій контейнер посередині сторінки за допомогою Bootstrap 4. Я поки що не був успішним. Будь-яка допомога буде вдячна.

Я створив це на Codepen.io, щоб ви, хлопці, могли пограти з ним, і дайте мені знати, що працює, як я, з ідеї ...

var currentAuthor = "";
var currentQuote  = "";
function randomQuote() {
  $.ajax({
      url: "https://api.forismatic.com/api/1.0/?",
      dataType: "jsonp",
      data: "method=getQuote&format=jsonp&lang=en&jsonp=?",
      success: function( response ) {
        $("#quote-content").html('<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"> ' + response.quoteText + ' <i class="fa fa-quote-right" aria-hidden="true"></i></h2>');
        $("#quote-author").html('<p id="quote-author" class="lead"><em>' + response.quoteAuthor + '</em></p>');
        
        currentAuthor = response.quoteAuthor;
        currentQuote  = response.quoteText
      }
  });
}

function openURL(url){
  window.open(url,'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');
}

function tweetQuote(){
      openURL('https://twitter.com/intent/tweet?hashtags=quotes,freecodecamp&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" - ' + currentAuthor));
}

$(document).ready(function () {
    randomQuote();

    $("#get-another-quote-button").click(function(){
        randomQuote();
    });

   $('#tweet').on('click', function() {
       tweetQuote();
   });
});

html, body {
  background-image: url("https://www.mylinea.com/wp-content/uploads/beautiful-trees-stock-photo-055.jpg");
    background-color: #17234E;
    margin-bottom: 0;
    min-height: 30%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    background-size: cover;
}


.btn-new-quote {
    color: #0C0C0D;
    background-color: transparent;
    border-color: #414147;
}

.btn-new-quote:hover {
    color: #0C0C0D;
    background-color: #9A989E;
    border-color: #0C0C0D;
}

#tweet {
    color: RGB(100, 100, 100);
}

#tweet:hover {
    color: RGB(50, 50, 50);
}


.jumbotron {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    opacity: .85;
    border-color:  RGB(50, 50, 50);
    padding-bottom: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container">
    <div class="row justify-content-center align-self-center">
        <div class="col-sm-6">
            <div class="jumbotron vertical-center text-center">
                <h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"></i><i class="fa fa-quote-right" aria-hidden="true"></i></h2>
                <p id="quote-author" class="lead"><em></em></p>
                <hr class="my-2">
                <div class="row align-items-center justify-content-between">
                    <div class="col-sm-1-4 text-left">
                        <a id="tweet" href="#">
                            <h2 class="display-4"><i class="fa fa-twitter" aria-hidden="true"></i></h2>
                        </a>
                    </div>
                    <div class="col-sm-1-4 text-right">
                        <button id="get-another-quote-button" type="button" class="btn btn-outline-secondary  btn-new-quote">Don't Quote Me on This...</button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

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

Якщо батьківський елемент елемента, який ви намагаєтеся центрирувати , не має визначеної висоти , жодне з вертикальних центрових рішень не працюватиме!

Тепер на вертикальне центрування у 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є 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 пропонує флексбокс та інші утиліти , існує багато підходів до вертикального вирівнювання. 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 представляє поля на вертикальній осі у і еквівалентно:

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>

Вертикальний центр за допомогою демонстраційних утиліт Demo

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

Важливо! Я згадав висоту?

Пам'ятайте, що вертикальне центрування відносно висоти батьківського елемента. Якщо ви хочете зосередити всю сторінку, в більшості випадків це повинен бути ваш CSS ...

body,html {
  height: 100%;
}

Або використовувати min-height: 100vh( min-vh-100у Bootstrap 4.1+) на батьківському / контейнері. Якщо ви хочете централізувати дочірній елемент всередині батьків. Батько повинен мати певну висоту .

Також дивіться:
Вертикальне вирівнювання в завантажувальній системі 4
Bootstrap 4 Центр вертикальної та горизонтальної вирівнювання

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

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

Оновлена ​​ручка

Після завантаження 4 класи допомогли мені вирішити це

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

Оскільки для мене нічого з цього не працювало, я додаю ще одну відповідь.

Мета: по вертикалі та горизонталі вирівняти роздільник на сторінці за допомогою завантажувального 4 класів флешбоксу.

Крок 1: Встановіть ваш самий зовнішній дів на висоту 100vh. Це встановлює висоту на 100% від висоти Veiwport. Якщо цього не зробити, більше нічого не вийде. Встановити його на висоту 100%має лише відносно батьківського, тому якщо батьківський не повний зріст вікна перегляду, нічого не вийде. У наведеному нижче прикладі я встановив Body на 100vhh.

Крок 2: Встановіть контейнер div для контейнера flexbox з d-flexкласом.

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

Крок 4: Центруйте діл вертикально за допомогою align-items-center

Крок 5: Запустіть сторінку, перегляньте вертикальний та горизонтальний центр.

Зауважте, що не існує спеціального класу, який потрібно встановити на самому центрованому діві (дочірньому діві)

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

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

Я перепробував усі відповіді з цього пункту, але тут з’ясував різницю між h-100 та vh-100. Ось моє рішення:

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

У Bootstrap 4 (бета) використовуйте align-middle. Див. Документацію щодо вертикального вирівнювання Bootstrap 4 :

Змініть вирівнювання елементів утилітами вертикального вирівнювання . Зверніть увагу, що вертикальне вирівнювання впливає лише на елементи вбудованого , вбудованого блоку , вбудованої таблиці та елементів комірки таблиці .

Виберіть з .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, і .align-text-topв разі необхідності.

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

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

Я зробив це так з 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>

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

Вертикальне вирівнювання За допомогою цієї завантажувальної програми 4 класи:

батьків: d-стіл

І

дитина: клітинка d-table & 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>

Розмістіть свій вміст у контейнері флексокса, який має висоту 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>

використовувати .my-auto(bootsrap4) клас css на yor div

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