Css 自动居中并在Div中保持图像的纵横比

我试图在保持纵横比的同时将图像居中放置在div中-我使用此代码，但不知何故它没有将项目对齐在中心（上/下中心）。如果可能，只使用CSS

图像的大小未知，因为它使用最大宽度

JSfiddle：

}

感谢您的帮助！我不确定我缺少了什么来完成这项工作。

JSFiddle-

您应该使用

display:inline块至
#图像支架img
至垂直对齐中间

CSS“显示内联块”属性允许元素像内联元素一样流动，但也会像块元素一样尊重属性（例如宽度），您可以使用“显示内联块”设置“垂直对齐中间”

HTML:

<div id="imageHolder">
    <img src="http://www.discoverjb.com/wp-content/uploads/2014/07/IMG_1399.jpg">
</div>

#imageHolder {
    width: 400px;
    height: 400px;
    line-height: 400px;
    background-color:#CCCCCC;
}
#imageHolder img {
    max-width: 100%;
    max-height:100%;
    display: inline-block; /* Instead of display: block; */
    margin: 0 auto;
    vertical-align: middle;
}

对于一个寻找水平中心的人

@sibbl的解决方案有效，但在水平情况下，图像顶部仍有一些像素

我已经输入了@Anomous代码

HTML:

JSFiddle-
感谢您的快速回复！为什么不显示：虽然是块工作？将在其发布后不久将其标记为答案available@user3448267只是因为
垂直对齐
属性不适用于块级元素。（仅适用于内联级元素和
表格单元格）。提示：要使图像垂直居中，还要水平居中，我需要添加
#imageHolder{text align:center}
，因为
边距：0 auto
不起作用。
#imageHolder {
    width: 400px;
    height: 400px;
    line-height: 400px;
    background-color:#CCCCCC;
}
#imageHolder img {
    max-width: 100%;
    max-height:100%;
    display: inline-block; /* Instead of display: block; */
    margin: 0 auto;
    vertical-align: middle;
}

<div class="imageHolder">
    <img src="http://lorempixel.com/g/800/400">
</div>
<div class="imageHolder">
    <img src="http://lorempixel.com/g/800/800">
</div>
<div class="imageHolder">
   <img src="http://lorempixel.com/g/400/800">
</div>

.imageHolder {
    width: 300px;
    height: 300px;
    background-color:#CCCCCC;
    margin:10px;
    display:inline-block;
    float:left;
    position:relative;
}
.imageHolder img {
    max-width: 100%;
    max-height:100%;
    margin: auto;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}