方法一:
这种方法可实现图片超出frame尺寸时,自动选择水平、垂直居中,效果如下
<div class="frame"> <img src="foo"/> </div> .frame { height: 160px; /*can be anything*/ 160px; /*can be anything*/ position: relative; } img { max-height: 100%; max- 100%; auto; height: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
demo: 图片居中
方法二:
原理是,使用协助元素(这里是span),作为img的相邻元素,同为inline-block的两元素相邻时增加vertical-align: middle
可使两元素垂直居中,代码如下
<div class=frame> <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250 /> </div> .frame { height: 25px; /* equals max image height */ 160px; border: 1px solid red; white-space: nowrap; 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- 160px; }
demo: 图片居中