在窗口的标题和底部之间垂直居中放置图像

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

我放在一起的小提琴

这个想法是要有一个顶部/中间/底部。 有一个css calc属性，可用于计算某些东西，例如高度。 假设您知道图像的高度是多少（假设为200像素），则可以执行以下操作：

top: calc(50% - 100px); 

这将使图像的顶部距顶部50％，减去图像尺寸的一半，因此图像的中间位置距顶部50％。

当然，您必须将中间部分设置为position relative or absolute ，并使image position absolute在内部。

这只是一种快速方法，还有其他方法。 再说一次，通常您希望将某个内容放在div而不是整个页面的中心。