在可滚动的div中水平和垂直对齐图像

Question

A有一个图像，并希望能够在固定大小的可滚动区域中放大/缩小它。这很容易，但如果图像小于可滚动区域，则应该在垂直和水平方向上居中。我找不到一个解决办法，如何把它在中间垂直对齐。流行的解决方案，如垂直对齐一个div内的图像与响应的高度，或如何垂直居中一个div为所有浏览器？不工作，因为可滚动区域。

http://jsfidle.net/smvyadnv/9/

HTML

<div class="outer">
    <div class="inner small">
        <img src="http://lorempixel.com/g/500/300/nature/"></img>
    </div>
</div>
<div class="outer">
    <div class="inner large">
        <img src="http://lorempixel.com/g/500/300/nature/"></img>
    </div>
</div>

CSS

img {
    width: 100%;
}
.outer {
    height: 300px;
    width: 400px;
    overflow: scroll;
    text-align: center;
}
.inner {
    display: inline-block;
}
.inner.small {
    width: 250px;
    height: 150px;
}
.inner.large {
    width: 500px;
    height: 300px;
}

Answer 1

我只是给了您的inner small图像一个名为cent（中心）的id，并给了它下面的css，使它看起来像是在中心。

#cent{
   padding-top:50px;
}

更新小提琴:http://jsfidle.net/smvyadnv/5/

如果你在找别的东西，请告诉我

Answer 2

您不应该尝试将图像居中，而应该将.inner元素居中。

您可以使用以下垂直/水平居中技术（摘自CSS技巧-CSS中的居中：完整指南）来实现这一点：

.outer {
    ...
    position: relative;
    ...
}
.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

因此您的代码如下所示：

css lang-css prettyprint-override">img {
    width: 100%;
}
.outer {
    height: 300px;
    width: 400px;
    overflow: scroll;
    position: relative;
}
.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.inner.small {
    width: 250px;
    height: 150px;
}
.inner.large {
    width: 500px;
    height: 300px;
}

<div class="outer">
    <div class="inner small">
        <img src="http://lorempixel.com/g/500/300/nature/"></img>
    </div>
</div>
<div class="outer">
    <div class="inner large">
        <img src="http://lorempixel.com/g/500/300/nature/"></img>
    </div>
</div>