Question

我有一个使用padding-bottom的div：100％将div的宽高比锁定为1：1（为了响应目的）：

<div class="image-container">

</div>

的CSS：

.image-container {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    background:yellow;
}

现在，我在这个容器内有一个宽度为100％的图像。但是，图像保持在顶部，我不能在图像上使用vertical-align：middle。

有没有办法可以让这个图像垂直居中？ JSFiddle：http://jsfiddle.net/g819gz2a/

不幸的是，我需要这个不仅适用于IE 9，而是致命的IE 8

Answer 1

您可以使用absolute定位执行以下操作：

JS Fiddle （在图像的示例背景中，绿色显示其居中）

.container {
    width:300px;
}
.image-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    background:yellow;
}
img {
    width:100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0px);
}

对于旧浏览器：

JS Fiddle

img {
    background: green;
    width:100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

垂直对齐div中使用padding-bottom锁定比率的图像

1 个答案: