web-dev-qa-db-fra.com

Alignement vertical du centre dans Bootstrap 4

J'essaie de centrer mon conteneur au milieu de la page à l'aide de Bootstrap 4.

htmlcsstwitter-bootstrapflexboxbootstrap-4
166
canaan seaton

vous pouvez aligner verticalement votre conteneur en rendant le conteneur parent flexible et en ajoutant align-items:center:

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

Stylo mis à jour

13
Pete

Suite aux 4 cours de bootstrap 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>
9
Manoj
.jumbotron {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
6
Nate Beers

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 une div sur une page à l’aide des classes bootstrap 4 flexbox.

Étape 1: Définissez votre division la plus externe sur une hauteur de 100vh. Ceci règle la hauteur à 100% de la hauteur de Veiwport. Si vous ne faites pas cela, rien d'autre ne fonctionnera. La définition de 100% n’est relative que par rapport au parent. Par conséquent, si le parent n’est pas à la hauteur de la fenêtre, rien ne fonctionnera. Dans l'exemple ci-dessous, je règle le corps sur 100vh.

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

Étape 3: Centre div horizontalement avec la classe justify-content-center.

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

Étape 5: Exécuter 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 la div centrée elle-même (la 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>
4
Greg Gum

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

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

Choisissez parmi .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom et .align-text-top si nécessaire.

3
vallismortis
<!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>
1
Anu

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

J'ai essayé toutes les réponses, mais 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 >
1
AlexNikonov

Dans Bootstrap 4.1.3:

Cela a fonctionné pour moi lorsque j'essayais de centrer un badge d'amorce dans un container > row > column à côté d'un titre h1.

Quel était le travail était simple css:

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

ou

<span class="badge badge-pill" style="vertical-align: 50%;">My Badge</span>
0
phyatt
<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>

 enter image description here

0
Tariqul_Islam