jquery - CSS:将任意大小的图像图标对齐在框的中间

Question

我已经浏览了几篇文章并访问了其他网站，但仍然找不到解决方案。 我尝试了一些建议但没有成功，从昨天到今天我已经尝试了几个小时来找到解决方案。 因此，如果这个问题看起来重复，请原谅我，但事实是没有一个解决方案适合我。 事实上，在重建整个页面之前，我希望得到这里某人的帮助。 我的老板“只是”希望看到图标适合框的中间位置。 由于框内没有文本，因此使用vertical-align: middle;不适用。图像可以具有不同的尺寸，因此我不能指望固定的尺寸来定位它。

谢谢

img {
    max-width: 100%;
    max-height: 100%;
}
.imageHolder {
    margin: 2px 10px;
    padding: 5px;
    border: 1px solid #999;
    background-color: white;  
    display: inline-block;  
    vertical-align: middle;
}
#contenido .logo-radio .imageHolder {
    width: 72px;
    height: 72px;  
}

<div class="logo-radio">
    <article class="imageHolder">
        <a href="#"><img src="#" alt="Logo AM 750"></a>
    </article>
</div>

Fiddle

Answer 1

我找到了解决方案。代码如下:

.imageHolder {
    text-decoration: none;
    display: inline-block;
    height: 72px;
    width: 72px;
    overflow: hidden;
    position: relative;
    border: 1px solid silver;
    vertical-align: middle;
    margin: 5px;
    padding: 3px;
}

.imageHolder img {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

我创建了一个jsfiddle显示它: