图片垂直居中

又遇到了未知高度的图片在固定宽高的div中垂直居中的问题。google了一些解决方案，如下。

方法一：

.box {
        /*非IE的主流浏览器识别的垂直居中的方法*/
        display: table-cell;
        vertical-align:middle;

        /*设置水平居中*/
        text-align:center;

        /* 针对IE的Hack */
        *display: block;
        *font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
        *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/

        width:200px;
        height:200px;
        border: 1px solid #eee;
}
.box img {
        /*设置图片垂直居中*/
        vertical-align:middle;
}

<div class="box">
        <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
</div>

来自： 怿飞 

demo: http://jsfiddle.net/2pBwm/，注意，如果box绝对(absolute)定位的，就不能使用这个方法了，如果要适应的话，要给box加个容器，把绝对定位放在容器上。

方法二： 

<div class="test_box">
	<span class="hook"></span>
	<a href="http://blog.linxz.de/css_book/" target="_blank"><img src="book.jpg" alt="" /></a>
</div>
.test_box {width:200px;height:200px;overflow:hidden;text-align:center;font-size:0;border:1px solid #000000;}
.test_box .hook {
 display:inline-block; width:0; height:100%;overflow:hidden;margin-left:-1px;font-size:0;line-height:0;vertical-align:middle;
.test_box img {vertical-align:middle;border:0 none;}

来自：  http://www.linxz.de/css_tool/middle_02.html

这个方法之前没见过，还挺新颖的