Comment centrer verticalement le contenu dans une division ?

Alignement vertical du contenu dans des dimensions de division définies

Le centrage du contenu verticalement dans un div d'une largeur et d'une hauteur spécifiées peut être obtenu par diverses méthodes . Explorons quelques options populaires :

1. Affichage : tableau-cellule pour la division parent

Régler l'affichage de la div parent sur table-cell et utiliser vertical-align : middle sur le contenu enfant permet un centrage vertical.

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

2. Affichage : Bloquer et Afficher : Table-Cell

Définir l'affichage du div parent sur bloquer et l'affichage du contenu enfant sur table-cell permet d'obtenir des résultats similaires.

.parent-div {
  display: block;
  text-align: center;
}

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

3. Div et affichage parent flottant : cellule de tableau

Flotter le div parent et définir l'affichage du contenu enfant sur cellule de tableau entraîne également un centrage vertical.

.parent-div {
  float: left;
  text-align: center;
}

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

4. Position : relative et Position : absolue

En définissant la position du div parent sur relative et la position du contenu enfant sur absolue, haut à 50 % et marge supérieure à -50 %, le centrage vertical peut être atteint. Cependant, cette méthode nécessite des ajustements manuels pour différents scénarios de hauteur.

.parent-div {
  position: relative;
  height: 100px;
  width: 100px;
}

.child-content {
  position: absolute;
  top: 50%;
  margin-top: -50%;
  width: 100px;
}

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!