Centrer en CSS, comment faire pour réussir ?

Centrer en CSS, comment faire pour réussir ?

Pour beaucoup, centrer des éléments sur une page web avec les CSS peut sembler simple à réaliser, alors que la réalité est souvent toute autre. Que ce soit horizontalement, verticalement ou les deux ensemble, cela peut même devenir une sorte de parcours du combattant. En fait, le problème n'en est pas un si l'on détermine ce que l'on souhaite obtenir dès le départ. Je dirais que la difficulté principale vient surtout du fait qu'il y a différentes manières de parvenir à centrer ce que l'on souhaite en fonction de la situation. Il est donc parfois compliqué de savoir quelle méthode employer pour obtenir le résultat escompté.

Pour ne rien vous cacher, il m'arrive parfois d'y perdre un peu mon latin. Aussi, j'ai eu envie de regrouper certaines de ces techniques pour les avoir sous la main le moment venu. Grâce à ce tutoriel, je vous propose passer en revue les différents cas de figure qui permettent de centrer en CSS et pour chacun d'entre eux, les codes les plus appropriés à utiliser pour obtenir le résultat voulu.

Center horizontalement

1.1 - C'est un élément inline (exemple: du texte ou un lien) ?

Vous pouvez centrer horizontalement les éléments inline au sein d'un élément parent de type bloc, simplement avec :

.centrer-element 
{
  text-align: center;
}

Cela fonctionne également avec inline, inline-block, inline-table, inline-flex, etc.

Résultat :

1.2 - C'est un élément de type bloc ?

Vous pouvez centrer un élément de type bloc en donnant la valeur auto à margin-left et margin-right (et avec une valeur width sinon cela prendrait toute la largeur et il n'y aurait pas besoin de centrer). Cela se fait souvent avec un raccourci comme ceci :

.centrer-element 
{
  margin: 0 auto;
}

Cela fonctionnera quelle que soit la largeur de l'élément de niveau bloc que vous souhaitez centrer.

Résultat :

1.3 - Y a t il plusieurs éléments de type bloc à centrer en CSS ?

Si vous avez au minimum 2 éléments de type bloc à center horizontalement sur une même ligne, il y a de grandes chances que vous obtiendrez un meilleur résultat avec la propriété display. Voici un exemple en utilisant inline-block combiné avec flex:

Autre cas de figure : vous avez plusieurs éléments de type bloc empilés les uns au-dessus les autres. Dans ce cas, la technique de la marge auto vue précédemment reste la meilleure option qui soit :

Center verticalement

Le centrage vertical en CSS est une sorte de Graal mais vous allez voir que l'on peut y arriver assez facilement.

2.1 Est-ce un élément inline (exemple: du texte ou un lien)?

2.1.1 - Y a t il une seule ligne ?

Il arrive que des éléments inline peuvent apparaître centrés verticalement simplement parce que l'espacement au dessus et en dessous est identique.

.lien 
{
  padding-top: 30px;
  padding-bottom: 30px;
}

Si le padding n'est pas utilisable pour une raison quelconque et vous essayez de centrer du texte, vous pouvez utiliser line-height en lui donnant une valeur égale à la hauteur qu'aura center la ligne de votre texte.

.centrer-element  
{
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

2.1.2 - Y a t il plusieurs lignes ?

Un padding identique au dessus et en dessous peut également donner l'illusion d'un centrage pour plusieurs lignes de texte, mais cela peut ne pas fonctionner correctement. La propriété vertical-align peut gérer cela dans ce cas, contrairement à ce qu'elle fait normalement (gérer l'alignement des éléments alignés sur une rangée).

Si l'utilisation d'un tableau ne vous convient pas, vous pouvez utiliser flex. Un flex enfant unique peut être centré dans un flex parent assez facilement.

.flex-centrer-element 
{
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

Gardez en mémoire que cela n'est pertinent que si le conteneur parent a une hauteur fixe (px,%, etc). Cela explique pourquoi le conteneur ici a une hauteur déterminée (200px).

Si ces deux techniques ne fonctionnaient pas, vous pouvez employer la technique de "l'élément fantôme", c'est à dire un élément de pseudo-hauteur est placé à l'intérieur du conteneur et le texte est aligné verticalement.

.fantome-center 
{
  position: relative;
}
.fantome-center::before 
{
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.fantome-center p 
{
  display: inline-block;
  vertical-align: middle;
}

2.2 - Est-ce un élément de niveau bloc ?

2.2.1 - Vous connaissez la hauteur de l'élément ?

Il arrive très souvent que l'on ne connaisse pas la hauteur (totale ou finale) de la mise en page. Par exemple, si la largeur de la page est changée, le reflux du texte peut modifier la hauteur de la page. La modification du style du texte, de la quantité de texte peuvent également modifier la hauteur de la page. C'est aussi le cas des éléments avec un rapport d'aspect fixe (les images, par exemple) qui peuvent modifier la hauteur lors d'un redimensionnement de la page.

Si vous connaissez la hauteur de la page, vous pouvez facilement centrer verticalement comme ceci :

.parent 
{
  position: relative;
}
.enfant
{
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; 
}

2.2.2 - L'élément a une hauteur inconnue ?

Dans ce cas, il est toujours possible de le centrer verticalement en utilisant ce code :

.parent 
{
  position: relative;
}
.enfant 
{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

2.2.3 - Et en utilisant flex ?

Pas de réelle surprise ici, c'est même un peu plus simple en utilisant flex.

.parent 
{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
Concernant le centrage vertical des éléments positionnés en absolute, retenez simplement que la technique est la même qu'en horizontal. C'est tout de suite plus simple.

Center horizontalement et verticalement

Attention, on arrive dans l'antre du lapin blanc !
Vous pouvez très bien combiner les techniques présentées jusqu'ici pour parfaitement centrer en CSS les éléments de votre page. Pour bien faire les choses et parce que c'est amusant, nous allons appréhender cette configuration sous différents angles :

3.1 - Y a t il un élément à centrer ?

3.1.1 - Cet élément a t il une largeur et une hauteur fixe ?

Pour réussir à centrer en CSS ce cas de figure, vous devez utiliser des marges négatives égales à la moitié de cette largeur et de cette hauteur, après que vous ayez positionné l'élément avec absolute à 50%, c'est à dire comme ceci :

.parent 
{
  position: relative;
}
.enfant 
{
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

3.1.2 - L'élément a t il une hauteur et une largeur inconnue ?

Si vous ne connaissez ni la hauteur et ni la largeur de l'élément à center en CSS, il est possible d'utiliser la propriété transform avec un translate de 50% sur les deux directions pour centrer (dans ce cas, il est basé sur la largeur et la hauteur de l'élément courant) :

.parent 
{
  position: relative;
}
.enfant 
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3.1.3 - Et en utilisant flex ?

Pour centrer dans les deux directions avec flex, vous avez besoin d'utiliser deux propriétés center différentes :

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

3.2 - Y a t il plusieurs éléments à centrer ?

Dans le cas où vous auriez plusieurs éléments à centrer en CSS dans les deux dimensions, il convient alors d'appliquer un display:inline-block (pensez à ajouter un correctif pour IE7 qui ne reconnait inline-block que pour les éléments naturellement inline) :

.parent 
{ 
  text-align:center; 
}

.enfant 
{ 
  width:100px;
  margin:0 10px; 
  border:1px solid #fff;
  display:inline-block;
  vertical-align:middle;
  text-align:left; 
}

Conclusion

Et voilà, c'est déjà terminé ! Avouez que ce n'est pas si compliqué dès lors que l'on pose les bases du problème clairement : inline ou bloc, fixe, fluide, etc. J'espère en tout cas que ce tutoriel vous aura permis de mieux comprendre les dessous du positionnement CSS pour les appliquer au centrage de vos éléments. Si vous avez des remarques, des observations, des questions ou même des critiques, n'hésitez pas à intervenir en commentaires.

Pour beaucoup, centrer des éléments sur une page web avec les CSS peut sembler simple à réaliser, alors que la réalité est souvent toute autre. Que ce soit horizontalement, verticalement ou les deux ensemble, cela peut même devenir une sorte de parcours du combattant. En fait, le problème n'en est pas un si l'on détermine ce que l'on souhaite obtenir dès le départ. Je dirais que la difficulté principale vient surtout du fait qu'il y a différentes manières de parvenir à centrer ce que l'on souhaite en fonction de la situation. Il est donc parfois compliqué de savoir quelle méthode employer pour obtenir le résultat escompté.

Pour ne rien vous cacher, il m'arrive parfois d'y perdre un peu mon latin. Aussi, j'ai eu envie de regrouper certaines de ces techniques pour les avoir sous la main le moment venu. Grâce à ce tutoriel, je vous propose passer en revue les différents cas de figure qui permettent de centrer en CSS et pour chacun d'entre eux, les codes les plus appropriés à utiliser pour obtenir le résultat voulu.

Center horizontalement

1.1 - C'est un élément inline (exemple: du texte ou un lien) ?

Vous pouvez centrer horizontalement les éléments inline au sein d'un élément parent de type bloc, simplement avec :

.centrer-element 
{
  text-align: center;
}

Cela fonctionne également avec inline, inline-block, inline-table, inline-flex, etc.

Résultat :

1.2 - C'est un élément de type bloc ?

Vous pouvez centrer un élément de type bloc en donnant la valeur auto à margin-left et margin-right (et avec une valeur width sinon cela prendrait toute la largeur et il n'y aurait pas besoin de centrer). Cela se fait souvent avec un raccourci comme ceci :

.centrer-element 
{
  margin: 0 auto;
}

Cela fonctionnera quelle que soit la largeur de l'élément de niveau bloc que vous souhaitez centrer.

Résultat :

1.3 - Y a t il plusieurs éléments de type bloc à centrer en CSS ?

Si vous avez au minimum 2 éléments de type bloc à center horizontalement sur une même ligne, il y a de grandes chances que vous obtiendrez un meilleur résultat avec la propriété display. Voici un exemple en utilisant inline-block combiné avec flex:

Autre cas de figure : vous avez plusieurs éléments de type bloc empilés les uns au-dessus les autres. Dans ce cas, la technique de la marge auto vue précédemment reste la meilleure option qui soit :

Center verticalement

Le centrage vertical en CSS est une sorte de Graal mais vous allez voir que l'on peut y arriver assez facilement.

2.1 Est-ce un élément inline (exemple: du texte ou un lien)?

2.1.1 - Y a t il une seule ligne ?

Il arrive que des éléments inline peuvent apparaître centrés verticalement simplement parce que l'espacement au dessus et en dessous est identique.

.lien 
{
  padding-top: 30px;
  padding-bottom: 30px;
}

Si le padding n'est pas utilisable pour une raison quelconque et vous essayez de centrer du texte, vous pouvez utiliser line-height en lui donnant une valeur égale à la hauteur qu'aura center la ligne de votre texte.

.centrer-element  
{
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

2.1.2 - Y a t il plusieurs lignes ?

Un padding identique au dessus et en dessous peut également donner l'illusion d'un centrage pour plusieurs lignes de texte, mais cela peut ne pas fonctionner correctement. La propriété vertical-align peut gérer cela dans ce cas, contrairement à ce qu'elle fait normalement (gérer l'alignement des éléments alignés sur une rangée).

Si l'utilisation d'un tableau ne vous convient pas, vous pouvez utiliser flex. Un flex enfant unique peut être centré dans un flex parent assez facilement.

.flex-centrer-element 
{
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

Gardez en mémoire que cela n'est pertinent que si le conteneur parent a une hauteur fixe (px,%, etc). Cela explique pourquoi le conteneur ici a une hauteur déterminée (200px).

Si ces deux techniques ne fonctionnaient pas, vous pouvez employer la technique de "l'élément fantôme", c'est à dire un élément de pseudo-hauteur est placé à l'intérieur du conteneur et le texte est aligné verticalement.

.fantome-center 
{
  position: relative;
}
.fantome-center::before 
{
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.fantome-center p 
{
  display: inline-block;
  vertical-align: middle;
}

2.2 - Est-ce un élément de niveau bloc ?

2.2.1 - Vous connaissez la hauteur de l'élément ?

Il arrive très souvent que l'on ne connaisse pas la hauteur (totale ou finale) de la mise en page. Par exemple, si la largeur de la page est changée, le reflux du texte peut modifier la hauteur de la page. La modification du style du texte, de la quantité de texte peuvent également modifier la hauteur de la page. C'est aussi le cas des éléments avec un rapport d'aspect fixe (les images, par exemple) qui peuvent modifier la hauteur lors d'un redimensionnement de la page.

Si vous connaissez la hauteur de la page, vous pouvez facilement centrer verticalement comme ceci :

.parent 
{
  position: relative;
}
.enfant
{
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; 
}

2.2.2 - L'élément a une hauteur inconnue ?

Dans ce cas, il est toujours possible de le centrer verticalement en utilisant ce code :

.parent 
{
  position: relative;
}
.enfant 
{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

2.2.3 - Et en utilisant flex ?

Pas de réelle surprise ici, c'est même un peu plus simple en utilisant flex.

.parent 
{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
Concernant le centrage vertical des éléments positionnés en absolute, retenez simplement que la technique est la même qu'en horizontal. C'est tout de suite plus simple.

Center horizontalement et verticalement

Attention, on arrive dans l'antre du lapin blanc !
Vous pouvez très bien combiner les techniques présentées jusqu'ici pour parfaitement centrer en CSS les éléments de votre page. Pour bien faire les choses et parce que c'est amusant, nous allons appréhender cette configuration sous différents angles :

3.1 - Y a t il un élément à centrer ?

3.1.1 - Cet élément a t il une largeur et une hauteur fixe ?

Pour réussir à centrer en CSS ce cas de figure, vous devez utiliser des marges négatives égales à la moitié de cette largeur et de cette hauteur, après que vous ayez positionné l'élément avec absolute à 50%, c'est à dire comme ceci :

.parent 
{
  position: relative;
}
.enfant 
{
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

3.1.2 - L'élément a t il une hauteur et une largeur inconnue ?

Si vous ne connaissez ni la hauteur et ni la largeur de l'élément à center en CSS, il est possible d'utiliser la propriété transform avec un translate de 50% sur les deux directions pour centrer (dans ce cas, il est basé sur la largeur et la hauteur de l'élément courant) :

.parent 
{
  position: relative;
}
.enfant 
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3.1.3 - Et en utilisant flex ?

Pour centrer dans les deux directions avec flex, vous avez besoin d'utiliser deux propriétés center différentes :

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

3.2 - Y a t il plusieurs éléments à centrer ?

Dans le cas où vous auriez plusieurs éléments à centrer en CSS dans les deux dimensions, il convient alors d'appliquer un display:inline-block (pensez à ajouter un correctif pour IE7 qui ne reconnait inline-block que pour les éléments naturellement inline) :

.parent 
{ 
  text-align:center; 
}

.enfant 
{ 
  width:100px;
  margin:0 10px; 
  border:1px solid #fff;
  display:inline-block;
  vertical-align:middle;
  text-align:left; 
}

Conclusion

Et voilà, c'est déjà terminé ! Avouez que ce n'est pas si compliqué dès lors que l'on pose les bases du problème clairement : inline ou bloc, fixe, fluide, etc. J'espère en tout cas que ce tutoriel vous aura permis de mieux comprendre les dessous du positionnement CSS pour les appliquer au centrage de vos éléments. Si vous avez des remarques, des observations, des questions ou même des critiques, n'hésitez pas à intervenir en commentaires.

Daniel Dubois - auteur à web-eau.net

A propos de Daniel

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort de son expérience, il partage ses connaissances dans un état d'esprit open source. Très impliqué en faveur du CMS Joomla depuis 2014, il est également conférencier et fondateur du Joomla User Group Breizh.

web-eau.net

29800 Landerneau

06 74 50 27 99

daniel@web-eau.net