Centrer en CSS, mode d'emploi

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 votre texte.

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

Retour

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 la propriété 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;
}

Retour

Il arrive très souvent que l'on ne connaisse pas la hauteur 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.

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

Retour

Il est toujours possible de le centrer en utilisant ce code :

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

Retour

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

.parent 
{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Retour

Pour réussir cela, 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% :

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

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

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

Retour

Si vous ne connaissez ni la hauteur et ni la largeur de l'élément à center, vous pouvez 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%);
}

Retour

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

Retour