图片垂直居中

来源：互联网发布：可视化网址导航源码编辑：程序博客网时间：2024/05/18 02:26

又遇到了未知高度的图片在固定宽高的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

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