Centrage vertical avec CSS.

Prérequis.

• Découvrir HTML (en anglais).
• Découvrir CSS (en anglais).

Avec line-height.

Fixer une hauteur de ligne est la méthode la plus simple pour centrer verticalement les éléments inline. Ici, on simplement placé du texte dans un conteneur avec un line-height.

Attention : chaque saut de ligne sera affecté par la valeur de la hauteur de ligne.

/* Conteneur pour le texte */
#demo-opt1 {
  border: thin solid black;
  line-height: 6rem;
  color: red;
}

Avec position:relative ou padding.

Dans les deux cas, il s’agit de placer un élément à hauteur fixe, à égales distances du haut et du bas de son conteneur.

Ici, on a placé un bloc rouge haut de 4 unités, dans un conteneur haut de 6 unités. Pour centrer verticalement, on a simplement donné une marge haute d’1/6^e en haut (et par conséquent en bas aussi).

Note : donner un padding: 1rem 0; au conteneur aurait également pu centrer le bloc.

/* Boîte à centrer */
.boite-centree {
  position: relative;
  top: 16.7%;
  width: 4rem;
  height: 4rem;
  background: red;
}
/* Conteneur de la boîte */
#demo-opt2 {
  border: thin solid black;
  height: 6rem;
}

Avec display:table-cell.

Par défaut, une cellule de tableau centre verticalement son contenu. Simulez ce comportement en combinant display:table-cell; et vertical-align:middle; sur le conteneur de l’élément à centrer.

/* Boîte à centrer */
.boite-centree {
  width: 4rem;
  height: 4rem;
  background: red;
}
/* Conteneur simulant la cellule */
#demo-opt3{
	display: table-cell;
	border: thin solid black;
	height: 6rem;
	vertical-align: middle;
}