在标题和窗口底部之间垂直居中

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>