html - 使响应图像在 div 内垂直居中

Question

我有一个比容器 div 大的图像。当浏览器/屏幕调整大小时，它应该使图像变大或变小，但始终保持图像的中心在 div 内居中。以下网站就是其中一个示例:http://www.qdoba.com/ .当您调整屏幕大小时，它们的图像居中，使其响应非常好。我目前所拥有的只能使它水平调整大小而不是垂直调整大小。这是我到目前为止所拥有的:

.swiper-container {
    width: 100%;
    height: 300px;
    color: #fff;
    text-align: center;
    overflow: hidden;
}
.slide{ 
    width:100%; 

} 
.slide img{ 
    width:100%; 
}
</style>

<div class="swiper-container">
   <div class="slide">
        <img src='http://www.envision-creative.com/wp-content/uploads/Tiagos01.jpg' />
        <div class="title">Slide 1</div>
    </div>
</div>

Answer 1

很简单。 [跳转到更新的 Fiddle 答案的末尾]

HTML

<div class="slide">
    <span class="Centerer"></span><div class="Centered">
        <img src='http://imageshack.us/a/img19/3207/15p0213.jpg' />
        <div class="title">Slide 1</div>
    </div>
</div>

CSS

*
{
    margin: 0;
    padding:0;
}
html, body
{
    height: 100%;
}
.slide
{ 
    text-align: center;
    height: 100%;
    width: 100%; /*not really needed*/
}
.Centerer
{
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
.Centered
{
    display: inline-block;
    vertical-align: middle;
}

/*you don't always want your centered stuff to be 100% width, so its in a different rule*/
.Content
{
    width: 100%;
}
.Content img
{
    max-width: 30%; /*so you can see the responsive alignment and size*/
}

如果您不为幻灯片设置任何高度，它将始终具有其内容的准确高度，因此看起来就像没有垂直对齐。

看看这个 Working Fiddle

编辑我没有正确理解你。看看这个 New Fiddle