Centre d'alignement vertical dans Bootstrap 4

J'essaie de centrer mon conteneur au milieu de la page à l'aide de Bootstrap 4. Je n'ai pas réussi jusqu'à présent. Toute aide serait appréciée.

Je l'ai construit sur Codepen.io pour que vous puissiez jouer avec et me dire ce qui fonctionne car je suis à court d'idées ...

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>

Important! Le centre vertical est relatif à la hauteur du parent

Si le parent de l'élément que vous essayez de centrer n'a pas de hauteur définie , aucune des solutions de centrage vertical ne fonctionnera!

Maintenant, sur le centrage vertical dans Bootstrap 4 ...

Vous pouvez utiliser les nouveaux utilitaires flexbox et taille pour créer la containerpleine hauteur et display: flex. Ces options ne nécessitent pas de CSS supplémentaire (sauf que la hauteur du conteneur (ie: html, body) doit être de 100% ).

Option 1 align-self-centersur Flexbox enfant

<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

Option 2 align-items-centersur le parent Flexbox ( .rowest 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

Option 3 justify-content-centersur le parent Flexbox ( .cardest 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

En savoir plus sur le centrage vertical Bootstrap 4

Maintenant que Bootstrap 4 propose Flexbox et d' autres utilitaires , il existe de nombreuses approches pour l'alignement vertical. http://www.codeply.com/go/WG15ZWC4lf

1 - Centre vertical à l'aide des marges automatiques:

Une autre façon de centrer verticalement est d'utiliser my-auto. Cela centrera l'élément dans son conteneur. Par exemple, h-100rend la ligne pleine hauteur et my-autocentre verticalement la col-sm-12colonne.

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Centre vertical à l'aide de la démonstration des marges automatiques

my-auto représente les marges sur l'axe vertical y et équivaut à:

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

2 - Centre vertical avec Flexbox:

Puisque Bootstrap 4 .rowest maintenant, display:flexvous pouvez simplement l'utiliser align-self-centersur n'importe quelle colonne pour le centrer verticalement ...

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

ou, utilisez align-items-centersur l'ensemble .rowpour aligner verticalement au centre tout col-*dans la rangée ...

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

Démonstration de colonnes verticales de différentes hauteurs

Voir ce Q / A au centre, mais maintenir une hauteur égale

3 - Centre vertical utilisant des outils d'affichage:

Bootstrap 4 a utils d'affichage qui peuvent être utilisés pour display:table, display:table-cell, display:inline, etc .. Ils peuvent être utilisés avec les utils d'alignement vertical à roues alignées align, inline-block ou des éléments de cellules de tableau.

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

Vertical Center Using Display Utils Demo

Plus d'exemples
Image du <div>
centre vertical dans le centre vertical .row dans .container
Centre vertical et bas dans le <div>
centre vertical enfant à l'intérieur du parent
Centre vertical plein écran jumbotron

Important! Ai-je mentionné la taille?

N'oubliez pas que le centrage vertical est relatif à la hauteur de l' élément parent . Si vous voulez vous centrer sur toute la page, dans la plupart des cas, cela devrait être votre CSS ...

body,html {
  height: 100%;
}

Ou utilisez min-height: 100vh( min-vh-100dans Bootstrap 4.1+) sur le parent / conteneur. Si vous souhaitez centrer un élément enfant à l'intérieur du parent. Le parent doit avoir une hauteur définie .

Voir aussi:
Alignement vertical dans bootstrap 4
Bootstrap 4 Alignement vertical et horizontal central

vous pouvez aligner verticalement votre conteneur en faisant fléchir le conteneur parent et en ajoutant align-items:center:

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

Stylo mis à jour

Suivre les cours de bootstrap 4 m'a aidé à résoudre ce problème

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

Parce que rien de ce qui précède n'a fonctionné pour moi, j'ajoute une autre réponse.

Objectif: aligner verticalement et horizontalement un div sur une page en utilisant les classes flexbox bootstrap 4.

Étape 1: Réglez votre div externe à une hauteur de 100vh. Cela définit la hauteur à 100% de la hauteur Veiwport. Si vous ne le faites pas, rien d'autre ne fonctionnera. Le définir à une hauteur de 100%est uniquement relatif au parent, donc si le parent n'est pas à la hauteur totale de la fenêtre, rien ne fonctionnera. Dans l'exemple ci-dessous, j'ai défini le corps sur 100vh.

Étape 2: définissez le conteneur div comme conteneur flexbox avec la d-flexclasse.

Étape 3: Centrez div horizontalement avec la justify-content-centerclasse.

Étape 4: Centrez div verticalement avec le align-items-center

Étape 5: Exécutez la page, affichez votre div centré verticalement et horizontalement.

Notez qu'il n'y a pas de classe spéciale qui doit être définie sur le div centré lui-même (le div enfant)

<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%);
}

J'ai essayé toutes les réponses ici, mais j'ai découvert ici la différence entre h-100 et vh-100 Voici ma solution:

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

Dans Bootstrap 4 (beta), utilisez align-middle. Reportez-vous à la documentation Bootstrap 4 sur l'alignement vertical :

Modifiez l'alignement des éléments avec les utilitaires d' alignement vertical . Veuillez noter que l'alignement vertical affecte uniquement les éléments inline , inline-block , inline-table et cell cell .

Faites votre choix parmi .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottomet .align-text-topau besoin.

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

Cette ligne est l'endroit où la magie opère <div class="col-md-6 my-auto">, le my-autocentre du contenu de la colonne. Cela fonctionne très bien avec des situations comme l'exemple de code ci-dessus où vous pourriez avoir une image de taille variable et avoir besoin que le texte dans la colonne à droite soit aligné avec.

Je l'ai fait de cette façon avec 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>

Alignement vertical En utilisant ce bootstrap 4 classes:

parent: d-table

ET

enfant: d-table-cell & align-middle & text-center

par exemple:

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

et si vous voulez que le parent soit cercle:

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

dont deux classes css personnalisées sont les suivantes:

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

L'utilisation finale peut être comme par exemple:

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

Placez votre contenu dans un conteneur flexbox 100% haut, c'est-à-dire h-100. Justifiez ensuite le contenu de manière centralisée à l'aide de la classe centre de contenu de justification .

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

utiliser .my-auto(bootsrap4) la classe css sur votre div

Dans Bootstrap 4.1.3:

Cela a fonctionné pour moi lorsque j'essayais de centrer un badge bootstrap à l'intérieur d'un à container > row > columncôté d'un h1titre.

Ce qui a fonctionné était un simple css:

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

ou

<span class="badge badge-pill" style="vertical-align: 50%;">My Badge</span>