Изображение центра вертикально между заголовком и нижней частью окна

Question

Я пытаюсь центрировать изображение телефона по вертикали. Код, который я должен выполнить до сих пор, но если я уменьшу высоту окна, изображение телефона будет перекрывать заголовок. То, что я хочу сделать, - это центрировать изображение телефона вертикально между нижней частью заголовка и нижней частью окна и оставаться там независимо от того, насколько высок это окно (но не перекрывать заголовок).

Ссылка на jsfiddle: jsfiddle.net/# & togetherjs = zAMDokl6RG.

Имея много проблем с этим. Может ли кто-нибудь дать мне несколько указаний о том, как это сделать, пожалуйста? Спасибо:

CSS:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    /* To keep our header correct */ 
 
} 
 
#header { 
 
    background: #e9e6e6; 
 
    /* Here set your colour */ 
 
    height: 55px; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    position: absolute; 
 
    /* box-shadow: 0px 2px 2px #888888;*/ 
 
} 
 
.innerdiv { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    padding: 0px 0px; 
 
    z-index: -2; 
 
} 
 
.dllogodiv { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    padding: 5px 5px; 
 
} 
 
.centeredImage { 
 
    text-align: center; 
 
    display: block; 
 
} 
 
.centeredImage img { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
}

<div id="header">My header</div> 
 
</div> 
 

 

 
<div class="innerdiv"> 
 
    <img class="imageCorner" src="http://s4.postimg.org/tyfx93u8p/logo.png"> 
 
</div> 
 
<p class="centeredImage"> 
 
    <img src="http://s4.postimg.org/p12cnzs9l/slide1.png"> 
 
</p>

Answer 1

heres a fiddle I put together

идея заключается в том, чтобы иметь верх/низ/середина. Существует свойство css calc, которое вы можете использовать для вычисления чего-то, например высоты. Предполагая, что вы знаете, что высота вашего изображения (позволяет сказать 200px), вы можете сделать:

top: calc(50% - 100px); 

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

, конечно, вы должны установить среднюю секцию в position relative or absolute и сделать image position absolute внутри.

Это всего лишь один быстрый способ, есть и другие способы. Опять же, обычно вы хотите сосредоточить что-то внутри div, а не на всей странице.