Centre d'alignement vertical dans Bootstrap 4

322

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

canaan seaton
la source

Réponses:

675

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>

entrez la description de l'image ici

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:

colonnes verticales de la grille centrale

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

Zim
la source
1
Lorsque j'utilise ci-dessus sur une page avec une barre de navigation, je reçois une barre de défilement. Je pense qu'il ajoute 100% de hauteur en dessous de la barre de navigation et se centre sur elle. Comment puis-je résoudre ce problème?
newdimension
J'essaie d'aligner plusieurs lignes pour centrer avec la boîte flexible. Je veux aligner tous les boutons au centre. codeply.com/go/5abdqC33cU
Coder
J'ai préparé un codepen montrant actuellement 3 méthodes de centrage basées sur les méthodes indiquées ici: codepen.io/yigith/pen/oNjmGEL
KodFun
23

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

Pete
la source
1
ohhh lol, j'ai raté le lien dans la description ... tu as aussi ajouté html, body {height:100%}... en ajoutant ça a fait marcher! Merci!
canaan seaton
1
votre réponse ne résout pas le problème de la manière demandée (en utilisant le bootstrap)
AlexNikonov
1
Je ne suis pas du tout d'accord avec vous, vous proposez une solution de contournement malgré la question de savoir comment faire avec les classes Bootstrap.
AlexNikonov
@AlexNikonov aucun endroit dans la question OP ne dit-il qu'ils sont limités à l'utilisation de bootstrap uniquement - c'est une alternative pour d'autres personnes qui peuvent atterrir sur cette page en cherchant à aligner verticalement les choses sans utiliser de classes bootstrap. Continuez simplement - il y a beaucoup d'autres réponses ici que vous pouvez utiliser. Je ne vois pas pourquoi vous êtes accroché à ce sujet - c'est un forum pour toutes les idées qui vous aideront - pas seulement des réponses simples. Ce sont des utilisateurs comme vous qui gâchent ce site en diminuant les réponses qui offrent une solution au problème, mais simplement parce que vous ne l'aimez pas
Pete
@AlexNikonov également si vous lisez le post original non édité (quand j'ai ajouté ma réponse), vous verrez également que OP essayait de se centrer sans utiliser de classes de bootstrap donc au moment de répondre, c'était correct
Pete
23

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>
Manoj
la source
1
Mais cela n'a pas centré ma div verticalement.
aube
Pouvez-vous développer votre code CSS? partager un extrait de celui-ci, je voudrais examiner le problème auquel vous êtes confronté.
Manoj
12

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>
Greg Gum
la source
@AjayKumar, souhaitez-vous partager vos modifications?
Greg Gum
Merci, surtout l' 100vhastuce m'a beaucoup aidé. Bootstrap fournit également la vh-100classe pour cela.
svens
10
.jumbotron {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
Bières Nate
la source
5

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 >

AlexNikonov
la source
4

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.

vallismortis
la source
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>

entrez la description de l'image ici

Tariqul_Islam
la source
vos photos m'ont fait penser que le stackoverflow a commencé les annonces: 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>

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.

Rob
la source
3

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>
webjay
la source
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>
Anu
la source
@AjayKumar L'ajout de la flex-grow-1classe à la carte l'empêche de rétrécir.
Fred
1

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>
Jafar Amini
la source
0

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>
Mwiza
la source
-1

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

Preshan Pradeepa
la source
-2

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>
phyatt
la source