Comment centrer verticalement le texte dans un élément Div ?

Utilisation de la hauteur de ligne

Pour centrer verticalement le texte d'une seule ligne, appliquez une hauteur de ligne égale à la hauteur souhaitée hauteur de l'élément, comme démontré dans le CSS suivant :

#abc {
  line-height: 50px;
}

Utilisation de Display Propriétés

Pour le texte multiligne, enveloppez le texte dans une ligne et appliquer display: table; et affichage : table-cellule ; avec vertical-align: middle; comme suit :

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

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

Utilisation de la propriété Transform

Pour un alignement plus avancé, envisagez d'utiliser la propriété transform avec TranslateY() :

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

Remarques importantes :

• L'alignement basé sur la transformation est limité prise en charge de plusieurs navigateurs.
• Assurez-vous que l'élément a une position définie, telle que relative ou absolue, pour que le positionnement de la transformation prenne effet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!