Comment puis-je centrer verticalement une division en utilisant CSS ?

Alignement vertical d'un div à l'aide de Margin:Auto

Quand il s'agit de centrer horizontalement un div, la technique couramment utilisée est margin: 0 auto . Cependant, pour l'alignement vertical, la syntaxe margin:auto auto ne fonctionne pas comme prévu.

Pourquoi Vertical-Align:Middle ne fonctionne pas

Une autre solution potentielle, vertical-align : middle, échoue car il s'applique uniquement aux éléments de niveau en ligne, pas aux éléments de niveau bloc comme divs.

Limitations de la marge pour l'alignement vertical

L'utilisation de margin : auto verticalement entraîne des problèmes :

• Margin-top : auto et margin-bottom : résultat automatique avec zéro valeur utilisée.
• Margin-top : -50 % calcule par rapport à la largeur du bloc conteneur, pas sa hauteur.

Solution de contournement pour l'alignement vertical

Bien que l'incapacité d'aligner verticalement des divs à l'aide de marges puisse être frustrante, il existe solutions de contournement. Une approche populaire consiste à imbriquer trois éléments :

.container {
  display: table;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}
.helper {
  position: absolute;
  top: 50%;
  display: table-cell;
  vertical-align: middle;
}
.content {
  position: relative;
  top: -50%;
  margin: 0 auto;
  width: 200px;
  border: 1px solid orange;
}

<div class="container">
  <div class="helper">
    <div class="content">
      <p>stuff</p>
    </div>
  </div>
</div>

Cette technique centre efficacement le div verticalement dans son conteneur parent.

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!