Изображение в изменяющемся заголовке

[Percent2014]

Есть заголовок, который меняет свою высоту в зависимости от размера экрана (20% от высоты экрана). Нужно в него поместить картинку, которая будет высотой 80% от заголовка и находиться точно по центру. Расположить в центре по горизонтали было легко, а вот по вертикали не получается.

 

Header - это div, headerimage - img
 

#header {   height:20vh;   background:red;   margin:0px;   text-align:center;}#headerimage {   max-height:80%;}

Подскажите, как правильно это сделать?

 

[Arinden]

Предлагаю вот так (JSFiddle):
HTML:

<div class="header">    <span></span>    <img src="http://www.google.com/images/srpr/logo11w.png" /></div>

CSS:

.header {   height: 20vh;   background: #cecece;   margin: 0px;   text-align: center;}.header span {    display: inline-block;    height: 100%;    vertical-align: middle;}.header img {    max-height: 80%;    max-width: 100%;    vertical-align: middle;}