Comment centrer verticalement une division en CSS ?

Centrer verticalement une Div avec margin:auto

While margin:O auto; centre horizontalement un div, margin:auto auto ; ne le centre pas verticalement. Malheureusement, vertical-align:middle; ne fonctionne pas non plus pour les éléments de niveau bloc comme les divs.

Limitations :

• vertical-align:middle;: Non applicable aux éléments de niveau bloc.
• margin-top:auto et margin-bottom:auto: Les valeurs calculées sont nulles.
• margin-top:-50%;: Les valeurs de marge basées sur un pourcentage sont basées sur la largeur du bloc conteneur.

Solutions de contournement pour le centrage vertical :

Échu en raison de la nature du flux de documents et des calculs de hauteur des éléments, il est impossible d'utiliser des marges pour le centrage vertical au sein d'un élément parent. Ces solutions de contournement peuvent toutefois résoudre le problème :

Approche des éléments imbriqués :

Cela nécessite l'imbrication de trois éléments comme suit :

.container {
  display: table;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}

.helper {
  display: table-cell;
  vertical-align: middle;
  position: absolute;
  top: 50%;
}

.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>

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!