Comment centrer verticalement du texte dans un Div avec une hauteur dynamique ?

Centrage vertical du texte dans un div de hauteur dynamique

Problème :
Obtenir l'alignement vertical du texte dans un élément div de hauteur variable , quelles que soient les dimensions de la fenêtre du navigateur.

Explication :
Pour centrer le texte verticalement dans le div de taille dynamique, nous utilisons la propriété display et l'attribut vertical-align.

Solution :

1. Définissez le div wrapper pour qu'il s'affiche sous forme de tableau :

   div {
    display: table;
   }

2. Style l'élément de texte en tant que cellule de tableau et alignez-le verticalement au milieu :

   h1 {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
   }

Remarques supplémentaires :
Cette solution a été minutieusement testée sur plusieurs systèmes d'exploitation et navigateurs, notamment Windows XP, Windows 7 et Linux Ubuntu, avec Internet Explorer, Opera, Firefox, Safari et Google Chrome.

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!