图片垂直居中的使用技巧（转载）

日期：2013-12-09 来源：攀枝花惠康网络公司

转载自己http://www.planabc.net/2008/05/26/img_vertical_center_solution/

123456789101112131415161718192021 .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>

“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水安然安祥垂直居中。”

当然出题并不是随意，而是有其现实的原因，垂直居中是淘宝工作中最常碰着的一个问题，很有代表性。

至于若何解决，下面是一个权衡的相对结构清洁，CSS简单的解决体例：

问题问题的可贵在于两点：

垂直居中；
图片是个置换元素，有些非凡的特征。

当然还有其他的解决体例，在此不深究，有乐趣的可以阅读下：

《Vertical centering using CSS》
《Vertical centering using CSS》（问题和上同，内容分歧）
《CSS List Grid Layout》

文章来源：攀枝花惠康网络公司

惠康网络，是一家专业从事攀枝花网站建设，攀枝花网站制作，攀枝花网站设计公司，提供网站建设一条龙服务（网站域名注册+网站服务器租用+网站开发+网站维护+网站营销推广），惠康网络立足攀枝花，辐射全中国，攀枝花惠康网络的客户已经遍布国内各地大中小城市，我们高效优质的网站建设服务深受用户好评。