如何垂直对齐div中的图像？
题
如何对齐一个包含div的图像？
例
在我的示例中，我需要将<div>的<img> <div>与class ="frame ”垂直居中：
<div class="frame" style="height: 25px;">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
.frame的高度是固定的，图像的高度是未知的。 如果这是唯一的解决方案，我可以在.frame添加新的元素。 我试图在IE≥7，Webkit，Gecko上做到这一点。
在这里看到jsfiddle
我所知道的唯一（也是最好的跨浏览器）方式是在两个元素上使用height: 100%和vertical-align: middle的inline-block助手。
所以有一个解决方案：http://jsfiddle.net/kizu/4RPFa/4570/
.frame {
height: 25px; /* equals max image height */
width: 160px;
border: 1px solid red;
white-space: nowrap; /* this is required unless you put the helper span closely near the img */
text-align: center; margin: 1em 0;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}<div class=frame>
<span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
<span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
<span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
<span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
<span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=15 />
</div>
<div class=frame>
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=13 />
</div>
<div class=frame>
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=11 />
</div>
<div class=frame>
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=9 />
</div>
<div class=frame>
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=7 />
</div>
<div class=frame>
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=5 />
</div>
<div class=frame>
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=3 />
</div>这可能是有用的：
div {
position:relative;
width:200px;
height:200px;
}
img {
position:absolute;
top:0;
bottom:0;
margin:auto;
}
.image {
min-height:50px
}
参考：http://www.student.oulu.fi/~laurirai/www/css/middle/
matejkramny的解决方案是一个好的开始，但超大图像的比例错误。
这是我的叉子：
演示：https://jsbin.com/lidebapomi/edit?html,css,output
HTML：
<div class="frame">
<img src="foo"/>
</div>
CSS：
.frame {
height: 160px; /*can be anything*/
width: 160px; /*can be anything*/
position: relative;
}
img {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}