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

Question

我正在尝试在一个div中居中一个图片并保持它的长宽比 - 我使用了这段代码，但是它似乎没有将项目对齐到中心（顶部/底部中心）。如果可能，只使用CSS。

由于使用最大宽度，因此不知道图片的大小！

JSfiddle: http://jsfiddle.net/L41wpza6/2/

#imageHolder {
width: 400px;
height: 400px;
line-height: 400px;
background-color:#CCCCCC;
}

#imageHolder img {
 max-width: 100%;
  max-height:100%;
  display: block;
  margin: 0 auto;
  vertical-align: middle;

任何帮助都将不胜感激！我不确定缺少了什么才能使其工作。

- user3448267

Answer 1

JSFiddle - 演示

你应该使用display: inline-block;来垂直居中#imageHolder img。

CSS的display inline-block属性允许元素像内联元素一样流动，但像块级元素一样遵守属性，如宽度，并且你可以使用display Inline-block将其垂直居中。

HTML：

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

CSS:

#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;
}

- Anonymous

---

谢谢您的快速回复！但是为什么display: block不起作用呢？一旦答案可用，我会很快将其标记为答案。 - user3448267

@user3448267，这是因为vertical-align属性不适用于块级元素（只适用于内联级元素和table-cell）。 - Hashem Qolami

注意：为了使图像不仅垂直居中而且水平居中，我需要添加 #imageHolder { text-align: center}，因为 margin: 0 auto 无法实现。 - sibbl

Answer 2

针对水平居中的需求，可以采用以下解决方案：

@sibbl提供的方法是有效的，但是在水平情况下图像顶部仍有一些像素。

我改进了@Anoymous的代码

HTML：

<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>

CSS：

.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;
}

JSFiddle - DEMO

- vanduc1102