如何垂直对齐div内的图像？

Question

如何垂直对齐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.frame {    height: 25px;      /* equals max image height */    line-height: 25px;    width: 160px;    border: 1px solid red;        text-align: center; margin: 1em 0;}img {    background: #3A6F9A;    vertical-align: middle;    max-height: 25px;    max-width: 160px;}        <div class=frame>   <img src="http://jsfiddle.net/img/logo.png" height=250 /></div><div class=frame>   <img src="http://jsfiddle.net/img/logo.png" height=25 /></div><div class=frame>   <img src="http://jsfiddle.net/img/logo.png" height=23 /></div><div class=frame>   <img src="http://jsfiddle.net/img/logo.png" height=21 /></div><div class=frame>   <img src="http://jsfiddle.net/img/logo.png" height=19 /></div><div class=frame>    <img src="http://jsfiddle.net/img/logo.png" height=17 /></div><div class=frame>    <img src="http://jsfiddle.net/img/logo.png" height=15 /> </div><div class=frame>    <img src="http://jsfiddle.net/img/logo.png" height=13 /> </div><div class=frame>    <img src="http://jsfiddle.net/img/logo.png" height=11 /> </div><div class=frame>    <img src="http://jsfiddle.net/img/logo.png" height=9 /> </div><div class=frame>    <img src="http://jsfiddle.net/img/logo.png" height=7 /> </div><div class=frame>    <img src="http://jsfiddle.net/img/logo.png" height=5 /> </div><div class=frame>    <img src="http://jsfiddle.net/img/logo.png" height=3 /> </div>

Answer 1

3线解决方案：

position: relative;top: 50%;transform: translateY(-50%);

这适用于任何事情。

从这里开始。