Centrer avec CSS - le guide complet
Un abonnement sur mon twitter-X et/ou youtube serait fortement apprécié.
Introduction
Vous avez certainement déjà essayé de centrer un élément avec CSS. C'est un classique et pourtant il arrive que cela devienne un casse-tête.
Dans ce tutoriel, nous verrons les différentes manières de centrer avec CSS (que ce soit une image, du texte ou tout autre élément).
Centrer horizontalement
Propriété text-align :
Je suis un élément inline (en ligne) centré horizontalement avec l'alignement de texte. Si je suis de type block sans largeur prédéfinie, je prendrai tout l'espace disponible et si je possède une taille, je ne serai pas centré.
<div>
<img></img> /*ou tout autre élément inline*/
</div>
div{
text-align: center /*NB : sur l'élément parent à l'élément inline*/
}
img{
height: <valeur>
width: <valeur>
}
Propriété margin :
Je suis un élément block centré horizontalement avec l'alignement de marge et une taille prédéfinie. Je peux être également centré sans largeur prédéfinie avec la valeur fit-content. Si je suis de type inline, cela ne fonctionnera pas.
<div>
<div></div>/*ou tout autre élément block*/
</div>
img{
display: block;
margin-left: auto;
margin-right: auto /*ou margin-inline: auto*/
height: <valeur> /*optionnel*/
width: <valeur> /*ou fit-content*/
}
Positionnement CSS :
Je suis un élément (peu importe mon type) centré horizontalement avec le positionnement absolu ainsi qu'une transformation sur l'axe X.
<div>
<img></img>/*ou tout autre élément*/
</div>
div{
position: relative /*nécessaire pour le positionnement absolu*/
}
img{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Je suis un élément (peu importe mon type) centré horizontalement avec le positionnement absolu ainsi qu'une marge négative. Il faut connaître ma largeur pour indiquer la marge.
<div>
<img></img>
</div>
div{
position: relative/*nécessaire pour le positionnement absolu*/
}
img{
position: absolute;
left: 50%;
width: <valeur>;
margin-left: <valeur négative>; /*on divise la largeur de notre élément par 2*/
}
Je suis un élément (peu importe mon type) centré horizontalement avec le positionnement absolu et une marge au centre.
<div>
<img></img>
</div>
div{
position: relative/*nécessaire pour le positionnement absolu*/
}
img{
position: absolute;
left: 0;
right:0;
width: <valeur>;
margin-left:auto;
margin-right:auto;/* ou margin-inline: auto*/
}
Je suis un élément (peu importe mon type) centré horizontalement avec le positionnement fixe et une marge au centre. Attention toutefois, mon positionnement sera déterminé selon la fenêtre du navigateur. Je peux être centré sans largeur et/ou hauteur prédéfinies avec la valeur fit-content.
<div>
<img></img>
</div>
img{
position: fixed;
top:0;
left: 0;
right:0;
width: <valeur>;
height: <valeur>;
margin-left:auto;
margin-right:auto;/* ou margin-inline: auto*/
}
Flexbox :
Je suis un élément inline centré horizontalement dans mon conteneur avec une disposition flexbox. Si je suis de type block, je serai également centré.
<div>
<svg></svg>
</div>
div{
/*inline et block éléments*/
display: flex;
justify-content: center;
}
Je suis un élément inline centré horizontalement avec flexbox et la propriété margin. Si je suis de type block, je serai également centré.
<div>
<svg></svg>
</div>
div{
/*inline et block éléments*/
display: flex;
}
svg{
margin-right: auto;
margin-left: auto;/* ou margin-inline: auto*/
}
Grid layout :
Je suis un élément inline centré horizontalement dans mon conteneur avec une disposition Grid layout. Si je suis de type block, je serai également centré.
<div>
<svg></svg>
</div>
div{
/*inline et block éléments*/
display: grid;
justify-content: center;
}
Centrer verticalement
Positionnement CSS
Je suis un élément (peu importe mon type) centré verticalement avec le positionnement absolu ainsi qu'une transformation sur l'axe Y.
<div>
<img></img>/*ou tout autre élément*/
</div>
div{
position: relative/*nécessaire pour le positionnement absolu*/
}
img{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Je suis un élément (peu importe mon type) centré verticalement avec le positionnement absolu ainsi qu'une marge négative. Il faut connaître ma hauteur pour indiquer la marge.
<div>
<img></img>
</div>
div{
position: relative/*nécessaire pour le positionnement absolu*/
}
svg{
position: absolute;
top: 50%;
margin-top: <valeur négative>; /*on divise la hauteur de notre élément par 2*/
}
Je suis un élément (peu importe mon type) centré verticalement avec le positionnement absolu et une marge au centre.
<div>
<img></img>
</div>
div{
position: relative/*nécessaire pour le positionnement absolu*/
}
img{
position: absolute;
top: 0;
bottom:0;
width: <valeur>;
height: <valeur>;
margin-top:auto;
margin-bottom:auto;/* ou margin-block: auto*/
}
Je suis un élément (peu importe mon type) centré verticalement avec le positionnement fixe et une marge au centre. Attention toutefois, mon positionnement sera déterminé selon la fenêtre du navigateur. Je peux être centré sans largeur et/ou hauteur prédéfinies avec la valeur fit-content.
<div>
<img></img>
</div>
img{
position: fixed;
top: 0;
bottom: 0;
width: <valeur>;
height: <valeur>;
margin-top:auto;
margin-bottom:auto;/* ou margin-block: auto*/
}
Flexbox :
Je suis un élément inline centré verticalement avec une disposition flexbox. Si je suis de type block, je serai également centré.
<div>
<svg></svg>
</div>
div{
/*inline et block éléments*/
display: flex;
align-items: center;
}
Je suis un élément inline centré verticalement avec une disposition flexbox et les marges. Si je suis de type block, je serai également centré.
<div>
<svg></svg>
</div>
div{
/*inline et block éléments*/
display: flex;
}
svg{
margin-top: auto;
margin-bottom: auto;/*ou margin-block:auto;*/
}
Je suis un élément inline centré verticalement avec une disposition flexbox sur le conteneur avec la propriété align-self. Si je suis de type block, je serai également centré.
<div>
<svg></svg>
</div>
div{
/*inline et block éléments*/
display: flex;
}
svg{
align-self: center;
}
Grid layout :
Je suis un élément inline centré verticalement avec une disposition Grid layout dans mon conteneur. Si je suis de type block, je serai également centré.
<div>
<svg></svg>
</div>
div{
/*inline et block éléments*/
display: grid;
align-items: center;
}
Je suis un élément inline centré verticalement avec une disposition Grid layout et les marges. Si je suis de type block, je serai également centré.
<div>
<svg></svg>
</div>
div{
/*inline et block éléments*/
display: grid;
}
svg{
margin-top: auto;
margin-bottom: auto;/*ou margin-block:auto;*/
}
Je suis un élément inline centré verticalement avec Grid layout. Si je suis de type block, je serai également centré.
<div>
<svg></svg>
</div>
div{
/*inline et block éléments*/
display: grid;
}
svg{
align-self: center;
}
Centrer horizontalement et verticalement
Positionnement CSS
Je suis un élément (peu importe mon type) centré horizontalement et verticalement avec le positionnement absolu ainsi qu'une transformation sur les axes X et Y.
<div>
<img></img>
</div>
div{
position: relative/*nécessaire pour le positionnement absolu*/
}
img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
Je suis un élément (peu importe mon type) centré horizontalement et verticalement avec le positionnement absolu et les marges négatives. Il faut connaître mes dimensions pour indiquer la marge.
<div>
<img></img>
</div>
div{
position: relative/*nécessaire pour le positionnement absolu*/
}
img{
position: absolute;
top: 50%;
left: 50%;
width: <valeur>;
height: <valeur>;
margin-top: <valeur négative>; /*on divise la hauteur de notre élément par 2*/
margin-left: <valeur négative>; /*on divise la largeur de notre élément par 2*/
}
Je suis un élément (peu importe mon type) centré horizontalement et verticalement avec le positionnement absolu et l'alignement de marge.
<div>
<img></img>
</div>
div{
position: relative/*nécessaire pour le positionnement absolu*/
}
img{
margin: auto;
position: absolute;
inset: 0; /* équivaut à top: 0;right: 0;bottom: 0;left: 0*/
width: <valeur>;
height: <valeur>;
}
Je suis un élément (peu importe mon type) centré verticalement et horizontalement avec le positionnement fixe et une marge au centre. Attention toutefois, mon positionnement sera déterminé selon la fenêtre du navigateur. Je peux être centré sans largeur et/ou hauteur prédéfinies avec la valeur fit-content.
<div>
<img></img>
</div>
img{
position: fixed;
inset: 0; /* équivaut à top: 0;right: 0;bottom: 0;left: 0*/
width: <valeur>;
height: <valeur>;
margin: auto
}
Flexbox :
Je suis un élément inline centré horizontalement et verticalement avec une disposition flexbox. Si je suis de type block, je serai également centré.
<div>
<svg></svg>
</div>
div{
display: flex;
justify-content: center;
align-items: center;
/*ou
place-content:center;
flex-wrap:wrap
*/
}
Je suis un élément inline centré horizontalement et verticalement avec une disposition flexbox et les marges. Si je suis de type block, je serai également centré.
<div>
<svg></svg>
</div>
div{
display: flex;
}
svg{
margin:auto
}
Grid layout :
Je suis un élément inline centré horizontalement et verticalement avec une disposition Grid layout. Si je suis de type block, je serai également centré.
<div>
<svg></svg>
</div>
div{
display: grid;
place-items: center
}
Je suis un élément inline centré horizontalement et verticalement avec une disposition Grid layout. Si je suis de type block, je serai également centré.
<div>
<svg></svg>
</div>
div{
display: grid;
}
img{
place-self:center
}
Je suis un élément inline centré horizontalement et verticalement avec une disposition Grid layout et les marges. Si je suis de type block, je serai également centré.
<div>
<svg></svg>
</div>
div{
display: grid;
}
svg{
margin: auto
}
Je suis un élément inline centré horizontalement et verticalement avec une disposition Grid layout. Si je suis de type block, je serai également centré.
<div>
<svg></svg>
</div>
div{
display: grid;
grid:1fr auto 1fr/ 1fr auto 1fr/* on divise la grille en trois*/
}
div>svg{
grid-column: 2;
grid-row: 2;/*on place notre image au centre, dans la seconde rangée et seconde colonne*/
}