html - 图像在标题和窗口底部之间垂直居中

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 属性可以用来计算一些东西，比如高度。假设您知道图片的高度(比如 200 像素)，您可以:

top: calc(50% - 100px); 

这将使图像的顶部距顶部 50%，减去图像大小的一半，因此图像的中间距顶部 50%。

当然，你必须把中间的部分设置为position relative or absolute，并且让里面的image position absolute。

这只是一种快速方法，还有其他方法。话又说回来，通常你想在一个 div 中居中一些东西，而不是整个页面。