Мне интересно, есть ли простой способ вертикального центрирования адаптивного изображения.

Пожалуйста, обратитесь к следующему jsFiddle:http://jsfiddle.net/persianturtle/yawTb/1/

Базовый HTML:

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

Базовый CSS:}

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

Это заголовок мобильного устройства, в котором используется то же изображение, которое отображается в окнах просмотра планшета и рабочего стола. Так как изображение уже загружается, я собираюсь использовать это же изображение, изменить его размер и выровнять по вертикали, чтобы я мог использовать одно изображение для всех видовых экранов.

Эта проблема: При изменении размера браузера изображение уменьшается, но оно не выравнивается по центру по вертикали.

Цель: Хотя ширина в этом примере сильно перекрывается, это не проблема для моего сайта. Целью является только вертикальное центрирование изображения при изменении размера браузера.

Я в порядке с использованием решения javascript / jQuery, но, конечно, простой CSS предпочтительнее.

Любая помощь с благодарностью!