Comment centrer verticalement le contenu dans une division avec des dimensions définies ?

Centrer le contenu verticalement dans un div avec des dimensions définies

Lorsque vous travaillez avec un div de largeur et de hauteur prédéfinies, l'alignement vertical de son contenu peut être un défi commun. Il faut une méthode qui centre efficacement le contenu de différentes hauteurs.

Solutions :

1. Parent Div as Table-Cell :

Définissez l'affichage du div parent sur table-cell. Cela élimine le besoin de table-cell sur le contenu lui-même :

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

2. Parent Div as Block, Content Div as Table-Cell :

Définissez l'affichage du div parent sur bloquer et l'affichage du contenu div sur table-cell :

.area {
  display: block;
}

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

3. Parent Div Floating, Content Div as Table-Cell :

Définissez le div parent sur flottant et le contenu div comme cellule de tableau. Cela nécessite un examen attentif des marges :

.area {
  float: left;
}

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

4. Parent Div Positioned Relative, Content Div Positioned Absolute :

Définissez la position du div parent sur relative et la position du div de contenu sur absolue. Déterminez la hauteur du contenu et définissez la marge supérieure à la moitié de la hauteur du contenu. Cette solution nécessite un ajustement manuel pour chaque cas :

.area {
  position: relative;
}

.content {
  position: absolute;
  top: 50%;
  height: 50%;
  margin-top: -25%;
}

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!