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.
Sommaire :
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;
}
<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.
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é.
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.
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) !