vertical Div alineación con dimensiones desconocidas

en CSS, ajustando dinámicamente la alineación vertical de un DIV puede ser desafiante cuando el tamaño del DIV es desconocido. Aquí hay una solución que aborda este problema:

css Solution

Esta solución pura CSS emplea vertical-align: medio dentro de un div más grande con una línea de línea fija:

#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;
}

El #center div se coloca en el centro de su padre con la parte superior: 50% y ajuste de margen para dar cuenta de la mitad de su altura. La enorme altura de la línea asegura que el contenido de texto dentro de él (en este caso, el niño div #Wrap) permanezca en la parte inferior.

Inside #center, #Wrap contiene la imagen con vertical-align: medio, que garantiza la alineación vertical independientemente del tamaño de la imagen. El navegador con una advertencia es IE7. Para ello, el Div #Wrap interno y la imagen deben aparecer en la misma línea: