Comment centrer verticalement une division à l'intérieur d'une division en pourcentage de hauteur ?

Alignement vertical d'un div dans un div à hauteur en pourcentage

Le positionnement d'un div verticalement dans un autre div dont la hauteur est basée sur un pourcentage peut être un défi courant dans le développement Web.

Question :Est-ce possible centrer un div verticalement au sein d'un div qui a une hauteur basée sur un pourcentage ?

Réponse : Oui, il est possible d'obtenir un centrage vertical en utilisant diverses techniques. Une approche populaire consiste à utiliser les propriétés CSS display: table-cell et vertical-align: middle.

En définissant display: table-cell sur le div interne, il devient un élément d'un tableau et hérite des propriétés d'une cellule de tableau. La propriété vertical-align: middle aligne ensuite la cellule verticalement dans le tableau.

Par exemple, considérons le code suivant :

.parent-div {
  height: 50%;
}

.child-div {
  display: table-cell;
  vertical-align: middle;
}

Dans cet exemple, le child-div sera centré verticalement dans le parent-div qui a un 50% hauteur.

Il est important de noter que même si cette approche fonctionne bien pour la plupart des navigateurs, Internet Explorer 6 ne prend pas en charge la propriété display: table-cell. En tant que tel, des méthodes alternatives ou des solutions de compatibilité entre navigateurs devront peut-être être envisagées pour IE6.

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!