alinhamento vertical div com dimensões desconhecidas

no CSS, ajustando dinamicamente o alinhamento vertical de uma div pode ser desafiador quando o tamanho da div é desconhecido. Aqui está uma solução que aborda esta questão:

solutação CSS

Esta solução CSS pura emprega vertical-align: meio dentro de uma div maior com uma altura de linha fixa: Posição: relativa; exibição: bloco; TOP: 50%; Margin -top: -1000px; Altura: 2000px; Alinhamento de texto: centro; altura de linha: 2000px; } #enrolar { altura da linha: 0; } #Wrap img { Alinhamento vertical: meio; }

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

O #Center Div está posicionado no centro de seus pais com o TOP: 50% e o ajuste da margem para explicar a metade da sua altura. A enorme altura de linha garante que o conteúdo de texto dentro dele (neste caso, o filho div #wrap) permaneça na parte inferior. Advertência é IE7. Para isso, o div #wrap interno e a imagem devem vir na mesma linha: