html - 在较小的容器中垂直对齐图像

Question

我有一个 100 像素 x 100 像素的容器。我在其中放了一张我不知道尺寸的图像，除了我将宽度设置为 100px 的事实。我想在 CSS 中找到一种方法来垂直对齐这个图像在它的容器中间。我把溢出卡住了：隐藏在容器上，以防止它显示广场外的任何东西。

我在这里找到了一些关于如何做相反的事情（宽度，而不是高度）。

Answer 1

将图像包裹在两个 div 中，这将模拟一个 html 表格。外部 div 将具有display: table属性，而内部 div 将具有display: table-cell属性。您可以将vertical-align内部 div 的属性设置为顶部、中间或底部。

HTML：

<div class="table">
    <div class="table-cell middle">
        <img src="https://www.google.ca/images/srpr/logo3w.png" alt="" />
    </div>
</div>​

CSS：

.table {
    display: table;
    width: 100px;
    height: 100px;
    border: 1px solid blue;
}
.table-cell {
    display: table-cell;
}
.middle {
    vertical-align: middle;
}
img {
    width: 100%;
    outline: 1px solid red;
}

这是小提琴。

Answer 2

您需要知道图像的高度才能垂直对齐它，然后使用这个 CSS：

div {
    position:relative;
    overflow:hidden;
}

div img {
    position:absolute;
    top:50%;
    margin-top:-XXXpx /*(where XXX px is half the height of the image)*/
}