Centrer une div horizontalement et verticalement peut sembler être une tâche ardue (un peu comme centrer une image !).

Pourtant, avec la bonne méthode employée dans le bon contexte, le CSS peut se résumer à 2 ou 3 lignes. Surtout depuis l’apparition des Flexbox, qui règnent en maître du centrage d’élément.

Nous allons voir dans cet article plusieurs méthodes pour arriver à vos fins.

Display : block

Un élément block qui possède des margin: auto se centrera horizontalement dans son parent. Place au code :

<div class="container">
    <div class="centered-element">
        .centered-element
    </div>
</div>

.container {
    width: 300px;
    height: 300px;
    border: 1px black solid;
}

.centered-element{
    margin-left: auto;
    margin-right: auto;
    background-color: grey;
    padding: 15px;
    width: 120px;
}

Dans les exemples plus bas, les propriétés CSS comme width etc ne seront pas répétées, elles seront sous entendues.

Display : inline-block

Cette fois-ci, pas besoin de margin: auto :

.container {
    text-align: center;
}

.centered-element{
    display: inline-block.
}

text-align: center; sert habituellement à centrer du texte, des éléments inline en somme. Inline-block est aussi affecté par cette cette propriété.

Flexbox

Non seulement les Flexbox permettent de centrer horizontalement, mais aussi verticalement. C’est d’ailleurs la seule méthode de centrage vertical vraiment propre (hors hack). Exemple :

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

justify-content s’occupe de l’axe horizontal, et align-items de l’axe vertical. Les Flexbox sont probablement la meilleur méthode, simple et puissante.

Position: absolute

Il est possible aussi de centrer sans s’occuper de la propriété display : utiliser la position: absolute.

.container{
    position: relative;
}

.centered-element{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

Avec cette position, top et left placent l’élément à 50% du haut de leur parent, et 50% à gauche.

Cependant, ces 2 propriétés ne sont pas suffisantes, c’est pour cela que l’on a besoin de transform, pour que l’élément centré se replace à 50% de sa largeur en haut et à gauche.

Si votre élément possède une width ou une height fixe, vous pouvez utiliser une margin-left ou une margin-top negative à la place de la propriété transform, de la moitié de la valeur de l’élément centré.

Par exemple, si votre élément centré en absolu a une width de 120px, une margin-left: -60px le centrera vers la gauche.

La propriété position: relative (ou autre valeur de position) sur la classe container est importante : position: absolute se placera relativement au 1er parent possédant une position.

Vous n’arrivez toujours pas à centrer votre div sur votre page comme vous le souhaitez ? Un autre élément lui fait peut-être obstacle… Vérifiez minutieusement le reste de votre code ou trouvez rapidement un intégrateur web sur Codeur.com pour vous aider (devis gratuits) !