图片垂直居中

这两天快累死了，肩膀又酸又痛，明显觉得自己已经成鼠标手了。

唠叨完了，分享一个图片居中的css ，有更好用的，希望可以共同分享交流……

 

html：

<div style="width:100px;margin-bottom:10px;">
<div class="img1"><a href="#"><img src="images/img1.jpg" width="75" height="75" /></a></div>   
</div>
<div class="img"><a href="#"><img src="images/img1.jpg" width="75" height="75" /></a></div>

css：

*{margin:0px;padding:0px;list-style-type:none;}
body{font-family:"SimSun","宋体","Arial Narrow";font-size:12px;color:#666;}
img{border:none;cursor:pointer;}
/*图片垂直居中*/
.img1{display:table-cell;vertical-align:middle;width:98px;height:98px;text-align:center;*display:block;*font-size:98px;border:1px solid #e0e0e0;}
.img1 a img{text-align:center;vertical-align:middle;}

.img{width:98px;height:98px;border:1px solid #ccc;overflow:hidden;position:relative;display:table-cell;text-align:center;vertical-align:middle;}
.img a{position:static;+position:absolute;top:50%;}
.img a img{position:static;+position:relative;top:-50%;left:-50%;}

我经常用的是第一个样式，如果图片的高度超过100px时，ie6和ie7下会出现图片下沉，只需要改font-size属性就可以了。第二个，暂时没有异常出现……