图片上下居中

今天遇到的问题就是需要把图片上下左右居中，其中左右居中比较简单，可以使用text-align:center;就能达到效果，重点在于高度居中。
在不知道图片高度的情况下，原先想使用css使得其上下居中，需要用到的是:

display: table-cell;
display: table;
vertical-align: middle

但是由于IE低版本不支持display: table-cell;，所以最终还是使用js来进行图片定位：

/** * 图片居中并根据上下尺寸铺满 * */ $(function(){ function reset_img_box(e){ $(function(){ var childred=$(e); var mainSize = [childred.width(),childred.height()]; var func = function(obj){ var h = obj.height(),w = obj.width(); if (h>0&&h<mainSize[1]){ var m = (mainSize[1]-h)/2; obj.css({ margin:m+'px 0' }); } }; for (var i=0; i < childred.length; i++) { var obj = $(childred[i]).find("img"); if (obj[0].complete){ func(obj); } obj.on('load',function(){ func(this); }); } }) } reset_img_box("#focus_map_small .ul-list li"); })

在需要定位的图片加载完成之后，对图片进行遍历，获取图片的高度和所在容器的高度，将差值/2，再使用margin进行上下居中。