Puis-je centrer verticalement un DIV à l'aide de « margin : auto » ?

Alignement vertical d'un DIV avec marge : auto

Question :

Est-il possible de centrer un DIV verticalement à l'aide d'une marge :auto auto;? Pourquoi vertical-align:middle; travail ?

Réponse :

Concernant la marge :

Malheureusement, margin:auto auto; ne réalise pas le centrage vertical. Les marges ne s'appliquent pas aux éléments de niveau bloc tels que les DIV pour l'alignement vertical. Par conséquent, margin:top:auto et margin-bottom:auto sont inefficaces.

Concernant vertical-align:middle;:

vertical-align:middle; ne s'applique qu'aux éléments en ligne, pas aux éléments de niveau bloc comme les DIV.

Solution de contournement :

Comme il n'est pas possible de centrer verticalement un DIV à l'aide de marges, une solution de contournement est recommandé. Une approche qui fonctionne bien consiste à utiliser des éléments imbriqués dans un conteneur de type tableau :

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

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!