Comment aligner verticalement le texte dans un div

Lorsque vous travaillez avec un div, il est parfois nécessaire de s'assurer que le texte qu'il contient est aligné verticalement au milieu. Ceci peut être réalisé par diverses méthodes.

Utilisation de la hauteur de ligne

Si le div a une hauteur fixe, telle que 50 px, vous pouvez simplement utiliser la hauteur de ligne Propriété CSS.

#abc {
  height: 50px;
  line-height: 50px;
}

Cela centrera le texte verticalement dans le div.

Utilisation des propriétés d'affichage

Pour le texte multiligne, vous pouvez l'envelopper dans un span élément et appliquer les propriétés d'affichage et l'alignement vertical.

#abc {
  display: table;
  width: 100%;
}

#abc span {
  display: table-cell;
  vertical-align: middle;
}

Utilisation de la propriété transform

Une autre méthode consiste à utiliser la propriété transform avec la fonction translateY(). Ceci est particulièrement utile pour les navigateurs plus anciens qui ne prennent pas en charge les propriétés d'affichage.

#abc {
  position: relative;
}

#abc p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}