La Cascade

Rechercher

Centrer un bloc div, guide complet

par Steve Pear, 28 mars 2014, css, flexbox, article original paru le 2 février 2014 dans Tipue

Un guide complet pour centrer une div. Steve Pear fait le tour de la question du centrage de div en CSS et propose des solutions pour tous les cas de figure.


Tout développeur a eu un jour des problèmes pour centrer un bloc div… Centrer le contenu d'une div est assez simple, il suffit de donner à la propriété text-align la valeur center, mais lorsqu'on parle de centrer la div elle-même les choses deviennent plus délicates, et quand il s'agit de centrer une div verticalement vous entrez dans un monde de douleur.

citation du film The Big Lebowski, you are entering a world of pain

L'objectif de cet article est de montrer comment, avec quelques astuces CSS, on peut centrer n'importe quelle div, horizontalement, verticalement ou les deux à la fois, à l'intérieur d'une page ou d'une div.

NdT : Steve Pear s'intéresse ici spécifiquement au centrage d'une div, pour une introduction complète au centrage du contenu d'une div, consultez l'article Centrer en CSS, un guide complet, de Chris Coyier : le centrage du contenu d'une div n'est pas aussi simple que le dit Steve Pear !

Centrer une div dans une page, les bases

Cette méthode fonctionne avec n'importe quel navigateur.

.center-div {
     margin: 0 auto;
     width: 100px;
}

Le résultat dans CodePen (vous pouvez cliquer sur HTML et CSS pour en voir le contenu ou sur edit on CodePen pour le modifier) :

La valeur auto de la propriété margin donne aux marges gauche et droite l'espace restant disponible dans la page. Il faut bien se rappeler de donner une propriété width à votre div.

Centrer une div dans une div, à l'ancienne

Cela fonctionne avec à peu près tous les navigateurs.

.outer-div {
     padding: 30px;
}
.inner-div {
     margin: 0 auto;
     width: 100px;
}

//HTML

<div class="outer-div">
	<div class="inner-div">
    </div>
</div>

Le résultat dans CodePen :

La marge auto frappe encore, et la div intérieure doit avoir une propriété width.

image tirée du film The Big Lebowski
“On vous l'avait bien dit les gars...”

Centrer une div dans une div avec inline-block

Avec la méthode inline-block, la div intérieure n'a pas besoin de propriété width. Fonctionne avec tous les navigateurs raisonnablement modernes.

.outer-div {
     padding: 30px;
     text-align: center;
}
.inner-div {
     display: inline-block;
     padding: 50px;
}

//HTML

<div class="outer-div">
	<div class="inner-div">
    </div>
</div>

La propriété text-align ne fonctionne qu'avec les éléments inline. La valeur inline-block affiche la div intérieure comme un élément inline et block, ce qui permet à la propriété text-align de la div extérieure de centrer la div intérieure.

Centrer une div dans une div, horizontalement et verticalement

On utilise l'astuce margin auto pour centrer une div dans le sens horizontal et vertical, et cela fonctionne avec tous les navigateurs modernes.

.outer-div {
     padding: 30px;
}
.inner-div {
     margin: auto;
     width: 100px;
     height: 100px;
}

//HTML

<div class="outer-div">
	<div class="inner-div">
    </div>
</div>

Le résultat dans CodePen :

La div intérieure doit avoir des propriétés width et height. Cette méthode ne fonctionne pas si la div extérieure a une hauteur fixe.

Centrer verticalement une div avec transform

Cette méthode utilise transform pour centrer verticalement tout contenu à l'intérieur d'une div. On fait appel à un élément HTML vide qui sert de conteneur, ici j'ai choisi <p>.

.center-div p
{
     position: relative;
     top: 50%;
     transform: perspective(1px) translateY(-50%);
}

// HTML
    <div class="center-div">
    	<p>Esse augue dolor</p>
    </div>
}

La valeur perspective réduit le flou (blurring) sur un affichage haute-définition. Pour une meilleure compatibilité avec les navigateurs anciens, vous pouvez utiliser les préfixes constructeurs comme -webkit-transform et -ms-transform. Ce dernier remonte jusqu'à IE9.

Centrer une div en bas de page

Ici, on utilise margin auto et une div externe positionnée absolument. Fonctionne avec tous les navigateurs modernes.

.outer-div {
     position: absolute;
     bottom: 30px;
     width: 100%;
}
.inner-div {
     margin: 0 auto;
     width: 100px;
     height: 100px;
     background-color: #ccc;
}

//HTML

<div class="outer-div">
	<div class="inner-div">
    </div>
</div>

La div intérieure doit avoir une propriété width. La distance la séparant du bas de page est définie grâce à la propriété bottom de la div extérieure.

Pour centrer une div en haut de page, remplacez la propriété bottom par top.

Centrer une div dans une page, horizontalement et verticalement

On utilise là encore margin auto, et une div extérieure positionnée absolument. Fonctionne avec tous les navigateurs modernes.

.center-div {
     position: absolute;
     margin: auto;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     width: 100px;
     height: 100px;
     background-color: #ccc;
}

La div doit avoir les propriétés width et height.

Centrer une div dans une page, responsive

La largeur de la div est responsive, elle s'adapte à la largeur du viewport. Fonctionne sur tous les navigateurs.

.center-div
{
     margin: 0 auto;
     max-width: 700px;
}

La div centrée doit avoir une propriété max-width.

Centrer une div dans une div responsive

La div intérieure est responsive. Fonctionne avec tous les navigateurs.

.outer-div
{
     padding: 30px;
}
.inner-div
{
     margin: 0 auto;
     max-width: 700px;
}

La div intérieure doit avoir une propriété max-width.

Centrer deux divs responsives, côte à côte

Deux divs côte à côte, toutes les deux sont responsives. Fonctionne avec tous les navigateurs.

.container
{
     text-align: center;
}
.left-div
{
     display: inline-block;
     max-width: 300px;
     vertical-align: top;
}
.right-div
{
     display: inline-block;
     max-width: 150px;
}
@media screen and (max-width: 600px)
{
     .left-div, .right-div
     {
          max-width: 100%;
     }
}

//HTML

<div class="container">
    <div class="left-div">
    </div>
    <div class="right-div">
    </div>
</div>

Pour cela on utilise juste deux éléments inline-block dans un conteneur centré. Notez qu'on fait également appel à la media query de CSS. Lorsque la taille d'écran est inférieure à 600px, la propriété max-width de chacune des divs est fixée à 100%.

Flexbox et le centrage de div

image tirée du film The Big Lebowski

Le nouveau modèle de mise en page Flexbox simplifie le centrage. L'exemple ci-dessous centre une div horizontalement et verticalement.

.container
{
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
}
.item
{
     background-color: #f3f2ef;
     border-radius: 3px;
     width: 200px;
     height: 100px;
}
voir Flexbox, div centered de Steve Pear dans CodePen

La propriété height du conteneur peut être ce qu'on veut, du moment qu'elle est plus large que la div centrée. Dans cet exemple, nous utilisons vh, qui est la hauteur de la fenêtre du navigateur, le viewport, plutôt que la hauteur de la page.

Centrer une div dynamique, horizontalement et verticalement

Cette méthode utilise la propriété display avec une valeur de table, ce qui lui donne le comportement d'un élément table et centre la div horizontalement et verticalement. La div centrée peut avoir un contenu dynamique, et donc une hauteur ou une largeur variable. Elle peut être responsive.

.outer-div
{
     display: table;
     position: absolute;
     height: 100%;
     width: 100%;
}
.mid-div
{
     display: table-cell;
     vertical-align: middle;
}
.center-div
{
     margin: 0 auto;
     width: 300px;
     height: 100px;
}

Les propriétés width et height de la div centrée peuvent être ce que vous voulez.


Ressources complémentaires

Consultez également dans La Cascade :

Voir la liste des articles de Steve Pear traduits dans La Cascade.
Article original paru le 2 février 2014 dans Tipue
Traduit avec l'aimable autorisation de Tipue et de Steve Pear.
Copyright Tipue © 2021