css - 垂直居中响应图像

Question

我得到一张图像，它应该总是像这样填充可用空间: https://jsfiddle.net/0236osj6/

是否可以使用 CSS 将此图像垂直居中 - 除了其现有行为之外？我已经用表格尝试了一些事情，但没有找到可行的解决方案:

#imagedetails_image table {
    width: 100%;
    height: 100%;
    text-align: center;
}

问题是表格不接受 100% 的高度。

Answer 1

您可以将父元素设置为 display:table，将子元素设置为 display:table-cell。在此之后，只需给您的子元素一个 vertical-align: middle。

这是一个例子:https://jsfiddle.net/zqgwL8tp/