Dernière mise à jour : juillet 2022
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).
text-align :Je suis un élément inline centré horizontalement avec l'alignement de texte. Si je suis de type block, cela ne fonctionnera pas.
<div>
<svg></svg>
</div>
div{
text-align: center /*NB : sur l'élément parent à l'élément inline*/
}
margin :Je suis un élément block centré horizontalement avec l'alignement de marge. Si je suis de type inline, cela ne fonctionnera pas.
<div>
<svg></svg>
</div>
svg{
display: block;
margin-left: auto;
margin-right: auto
}
Je suis un élément (peu importe mon type) centré horizontalement avec le positionnement absolu ainsi qu'une transformation sur l'axe X.
<div>
<svg></svg>
</div>
div{
position: relative
}
svg{
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.
<div>
<svg></svg>
</div>
div{
position: relative
}
svg{
position: absolute;
left: 50%;
margin-left: <valeur négative>; /*on divise la largeur de notre élément par 2*/
}
Je suis un élément inline centré horizontalement avec 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;
}
Je suis un élément inline centré horizontalement 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;
justify-content: center;
}
Je suis un élément (peu importe mon type) centré verticalement avec le positionnement absolu ainsi qu'une transformation sur l'axe Y.
<div>
<svg></svg>
</div>
div{
position: relative
}
svg{
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.
<div>
<svg></svg>
</div>
div{
position: relative
}
svg{
position: absolute;
left: 50%;
margin-top: <valeur négative>; /*on divise la hauteur de notre élément par 2*/
}
Je suis un élément inline centré verticalement avec flexbox. 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;
}
Je suis un élément inline centré verticalement avec flexbox. 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;
}
Je suis un élément inline centré verticalement avec 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 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{
margin-top: auto;
margin-bottom: 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;
}
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;
align-items: center;
}
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>
<svg></svg>
</div>
div{
/*inline et block éléments*/
position: relative
}
svg{
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 l'alignement de marge.
<div>
<svg></svg>
</div>
div{
/*inline et block éléments*/
position: relative
}
svg{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0
}
Je suis un élément (peu importe mon type) centré horizontalement et verticalement avec le positionnement absolu et les marges négatives.
<div>
<svg></svg>
</div>
div{
/*inline et block éléments*/
position: relative
}
svg{
position: absolute;
top: 50%;
left: 50%;
margin-top: <valeur négative>; /*on divise la largeur 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 inline centré horizontalement et verticalement avec 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;
align-items: center
}
Je suis un élément inline centré horizontalement et 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;
place-items: center
}
Vous avez remarqué une faute, un oubli, un lien mort ? Vous ne comprenez pas un point précis du tutoriel ? Vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux.