Comment centrer verticalement une division au sein de sa division parent ?

Centrer verticalement une div dans une div parent

Le centrage vertical d'une div dans sa div parent peut être réalisé par diverses méthodes, sans compter sur dimensions d'éléments spécifiques.

Mise en page de table (classique Approche)

Cette méthode utilise la disposition des tableaux et les propriétés d'affichage des blocs en ligne.

<div class="container">
  <div class="inner">
    ...
  </div>
</div>

.container {
  display: table-cell;
  vertical-align: middle;
  height: 500px;
  width: 500px;
}

.inner {
  display: inline-block;
  width: 200px;
  height: 200px;
}

Transformer (approche moderne)

Les transformations offrent une solution plus simple pour le centrage vertical.

.container {
  position: relative;
  height: 500px;
  width: 500px;
}

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
}

Flexbox (Approche moderne préférée)

Flexbox fournit la méthode la plus simple pour un alignement centré.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  width: 500px;
}

.inner {
  width: 200px;
  height: 200px;
}

Remarque :

• L'approche de disposition des tables est bien prise en charge mais peut avoir un impact sur les performances.
• Transform et flexbox offrent des solutions modernes avec un meilleur support et facilité d'utilisation.
• Ces méthodes assurent un centrage vertical quelles que soient les dimensions ou le contenu du div intérieur.

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!