Comment centrer verticalement un conteneur dans une page web avec Bootstrap ?
A partir de sa version, Bootstrap s'appuie sur les flexbox. Il s'agit d'un module de CSS gérant l'affichage avec un système de boîtes flexibles. Grâce à ce système, il existe beaucoup de solutions pour centrer verticalement un élément. Vous pouvez aussi bien centrer une ligne dans le container, qu'une colonne dans une ligne ou bien une carte, voire n'importe quel élément.
Toutes les solutions pour centrer verticalement un élément ont la même obligation : l'élément parent doit impérativement avoir une hauteur. Sans cette hauteur, il est impossible de centrer verticalement les éléments situés à l'intérieur. Si vous souhaitez simplement que votre contenu prenne toute la hauteur disponible, Bootstrap fournir la classe "h-100" qui donne une hauteur de 100% à un élément.
Pour centrer directement la ligne au sein de votre container, vous pouvez utiliser la classe "align-self-center". Il faut également ajouter la classe "d-flex" sur le container pour qu'il utilise le modèle des flexbox.
<div class="container d-flex h-100">
<div class="row align-self-center">
Le contenu est centré verticalement.
</div>
</div>
Pour centrer le contenu d'une colonne au sein d'une ligne, il suffit d'ajouter une seule classe sur la ligne, la classe "align-items-center". La classe "row" qui représente les lignes possède déjà les propriétés d'affichage flex ("display: flex" et "flex-direction: row").
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-12">
Le contenu est centré verticalement.
</div>
</div>
</div>
Si vous souhaitez aligner le contenu d'une carte, alors il faut lui ajouter la classe "justify-content-center". Les cartes utilisent également le système d'affichage Flexbox (avec "display:flex" et "flex-direction: column")
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-12">
<div class="card h-100 justify-content-center">
<div>
Le contenu est centré verticalement.
</div>
</div>
</div>
</div>
</div>
Il est possible de centrer un contenu verticalement en CSS classique en fixant les valeurs des propriétés "margin-top" et "margin-bottom" à "auto". Bootstrap fournit la classe "my-auto" qui intègre ces deux propriétés et permet donc de centrer verticalement un contenu.