Question

A有一个图像，并希望能够在固定大小的可滚动区域中放大/缩小它。这很容易，但如果图像小于可滚动区域，则应垂直和水平居中。我找不到如何在垂直中间对齐它的解决方案。由于可滚动区域，Vertically align an image inside a div with responsive height或How to vertically center a div for all browsers?等热门解决方案无效。

http://jsfiddle.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元素置于中心位置。

您可以使用以下垂直/水平居中技术（取自CSS Tricks - Centering in CSS: A Complete Guide）来实现此目的：

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

所以你的代码看起来如下：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

我刚刚为您的inner small图片提供了一个名为cent的ID（中心）并给它下面的css让它看起来像是在中心。

#cent{
   padding-top:50px;
}

更新了小提琴：http://jsfiddle.net/smvyadnv/5/

如果您正在寻找其他内容，请告诉我

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

2 个答案: