CSS Aligner verticalement les éléments de hauteur dynamique


Exemple

Appliquer intuitivement css ne produit pas les résultats souhaités car

Pour prendre en charge le navigateur le plus large, une solution de contournement avec les éléments d'aide:

HTML

<div class="vcenter--container">
  <div class="vcenter--helper">
    <div class="vcenter--content">
      <!--stuff-->
    </div>
  </div>
</div>

CSS

.vcenter--container {
  display: table;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}
.vcenter--helper {
  display: table-cell;
  vertical-align: middle;
}
.vcenter--content {
  margin: 0 auto;
  width: 200px;
}

jsfiddle de la question originale . Cette approche

  • fonctionne avec des éléments de hauteur dynamiques
  • respecte le flux de contenu
  • est pris en charge par les navigateurs existants