Eu estou querendo saber se há uma maneira simples de centralizar verticalmente uma imagem responsiva.

Por favor, consulte o seguinte jsFiddle:http://jsfiddle.net/persianturtle/yawTb/1/

HTML básico:

<img class="mobile-title-size" src="http://zx85.dyndns.org/raphtest/img/title.png" alt="Logo">

CSS básico:

.mobile-title-size {
position: absolute;
top: 2.5%;
left: 6%;
width: 70%;
max-width: 300px;

}

Esse é o cabeçalho para celular que usa a mesma imagem exibida nas janelas de exibição do tablet e da área de trabalho. Como a imagem já está sendo carregada de qualquer maneira, estou procurando usar essa mesma imagem, redimensioná-la menor e alinhar verticalmente para que eu possa usar uma imagem para todas as viewports.

O problema: No redimensionamento do navegador, a imagem fica menor, mas não alinha verticalmente no centro.

O objetivo: Mesmo que a largura se sobreponha mal neste exemplo, isso não é um problema no meu site. O objetivo é apenas centralizar verticalmente a imagem à medida que o navegador é redimensionado.

Eu estou bem com o uso de uma solução javascript / jQuery, mas é claro, CSS simples é o preferido.

Qualquer ajuda é muito apreciada!