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.

Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le développeur web idéal.

Intégration HTML

Personnalisation de page web

Création d'animations CSS

Ajout de formulaires

Trouver un développeur web

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

Attention, une balise <div> est un élément block par défaut, si vous voulez centrer un autre élément comme une balise <p>, il faudra lui rajouter la propriété CSS display: block.

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

Trouvez le meilleur développeur web sur Codeur.com

Vos premiers devis en 15 minutes

Gratuit et sans obligation

Déjà plus de 75 000 clients

Trouver un freelance

 

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.

Cette méthode est délicate : elle s’avère utile dans certains contextes, mais privilégiez tout de même les Flexbox, qui sont beaucoup plus flexibles !

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