圖片垂直居中的使用技巧（轉載）

日期：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的正方形容器中水安然安祥垂直居中?！?/p>

當然出題并不是隨意，而是有其現實的原因，垂直居中是淘寶工作中最常碰著的一個問題，很有代表性。

至于若何解決，下面是一個權衡的相對結構清潔，CSS簡單的解決體例：

問題問題的可貴在于兩點：

垂直居中；
圖片是個置換元素，有些非凡的特征。

當然還有其他的解決體例，在此不深究，有樂趣的可以閱讀下：

《Vertical centering using CSS》
《Vertical centering using CSS》（問題和上同，內容分歧）
《CSS List Grid Layout》

文章來源：攀枝花惠康網絡公司

惠康網絡，是一家專業從事攀枝花網站建設，攀枝花網站制作，攀枝花網站設計公司，提供網站建設一條龍服務（網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣），惠康網絡立足攀枝花，輻射全中國，攀枝花惠康網絡的客戶已經遍布國內各地大中小城市，我們高效優質的網站建設服務深受用戶好評。