Nous avons tous rencontré le problème du centrage de div en CSS. Steve Pear fait le tour de la question et propose des solutions pour tous les cas de figure.

Par

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 .

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

See the Pen Centering a div in a page, basic by Steve Pear (@Tipue) on CodePen.

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 :

See the Pen Centering a div within a div, old-school by Steve Pear (@Tipue) on CodePen.

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

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

See the Pen Centering a div within a div with inline-block by Steve Pear (@Tipue) on CodePen.

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 :

See the Pen Centering a div within a div, horizontally and vertically by Steve Pear (@Tipue) on 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.

(publicité)

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

See the Pen Vertical center in a div with transform by Tipue (@Tipue) on CodePen.

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>

See the Pen Centering a div at the bottom of a page by Steve Pear (@Tipue) on CodePen.

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

See the Pen Centering a div in a page, horizontally and vertically by Steve Pear (@Tipue) on CodePen.

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

See the Pen Centering a div in a page, responsive by Tipue (@Tipue) on CodePen.

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

See the Pen Centering a div within a div, inner div responsive by Tipue (@Tipue) on CodePen.

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>

See the Pen Centering two responsive divs, side by side by Tipue (@Tipue) on CodePen.

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

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

See the Pen Flexbox, div centered by Tipue (@Tipue) on 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.

NdT: Pour plus d'infos à ce sujet, consultez les articles sur Flexbox, en particulier Flexbox, guide complet et Flexbox en un coup de dés.

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

See the Pen Centering a dynamic div, horizontally and vertically by Tipue (@Tipue) on CodePen.

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

Article du même auteur sur le même thème
Fixer une div, guide complet


Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur CSS parus dans la Cascade.

Tous les articles sur les bases de CSS parus dans la Cascade.


Ressources complémentaires en anglais

How to center anything with CSS, par Joshua Johnson

Ressources complémentaires en français

Centrer en CSS, un guide complet, par Chris Coyier
Centrer les éléments ou un site web en CSS, par Raphaël

(publicité)


original paru le 2 février 2014, et régulièrement révisé, dans le blog de l'agence Tipue
Traduit avec l’aimable autorisation de Tipue et de l’auteur.
Copyright Tipue © 2014
.

Sur l’auteur : est responsable de l'agence Tipue basée à Londres, on peut le suivre sur Twitter.