Centrer en CSS, comment faire pour réussir ?

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 :

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

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

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