我最初将图像设置为固定高度div的背景,在这种情况下,它相对容易居中,但由于背景图像不是结构,我无法将高度设置为自动函数宽度,当我选择更具响应性的设计时,我不得不抛弃这个选项.

所以我现在有一个包含两个元素的div,即img和overlay文本.图像宽度设置为其容器宽度的100％,高度也相应变化.因此,我不能将叠加文本设置为postion：absolute和top：80px或者其他东西,因为距离顶部的距离必须变化.甚至做顶部：25％或者其他什么都不起作用,因为a)如果页面宽度缩小以挤压文本,或者如果只有更多文本,则当有更多/更少的行时,垂直居中将被抛弃,并且b )百分比是任意的 – 它不是50或者什么,因为当我想要叠加的中心在那里时,这会使文本的顶部覆盖50％的图像.

我已经看过了,其中包括this post,这绝对是接近的 – 但在两个解决方案中,图像高度无法调整大小,而在前者中,JS在页面加载时加载,但随后冻结,所以如果我改变页面宽度/高度,事情变得糟糕.理想情况下,这个解决方案不会因为这个原因而涉及JS(即使它在每次调整大小时重新加载,感觉都不理想),但如果这是唯一的解决方案,我会接受它.

另外,为了增加细节/乐趣,我在图像上设置了最大高度,因为即使在电影院显示器上,我也不希望它超过大约300px的高度.

Basic fiddle of current attempt here,以下相同的代码.有任何想法吗？谢谢！

HTML

<div class='quotation_div'>
  <img src='http://www.mountainprofessor.com/images/mount-ranier-mount-features-2.jpg'>
  <div class='overlay'>
      <p>Any reasonable amount of text should be able to go here. I want it to be able to center vertically even if it takes up 2 or 3 lines.</p>
  </div>
</div>

CSS

.quotation_div {
position: relative;
display: table;
}
img {
   width: 100%;
   max-height: 300px;
}
.overlay {
    z-index: 99;
    width: 70%;
    margin-left: 15%;
    vertical-align: middle;
    position: absolute;
    top: 25%; /* ObvIoUs problem,cause it's arbitrary */
}
p {
    text-align: center;
    color: red;
    font-size: 165%;
    font-weight: lighter;
    line-height: 2;
}