Alignement de div vertical avec des dimensions inconnues

dans CSS, ajustant dynamiquement l'alignement vertical d'une div peut être difficile lorsque la taille de la div est inconnue. Voici une solution qui aborde ce problème:

solution CSS

Cette solution CSS pure utilise vertical-align: Middle dans une div plus grande avec une ligne fixe-height:

#center {
  position: relative;
  display: block;
  top: 50%;
  margin-top: -1000px;
  height: 2000px;
  text-align: center;
  line-height: 2000px;
}
#wrap {
  line-height: 0;
}
#wrap img {
  vertical-align: middle;
}

Explication

Le div #Center est positionné au centre de son parent avec le haut: 50% et un ajustement de marge de marge pour tenir compte de la moitié de sa hauteur. L'énorme hauteur de ligne garantit que le contenu texte à l'intérieur (dans ce cas, l'enfant div #wrap) reste en bas.

à l'intérieur de #Center, #Wrap contient l'image avec la taille verticale: Middle, qui assure l'alignement vertical