【置中系列】大小不固定的圖片在固定容器中的水平垂直置中，置中容器

【置中系列】大小不固定的圖片在固定容器中的水平垂直置中，置中容器

一般在做產品頁面的時候，如果產品圖片寬高定死的話，有的圖片就會變形，如果把寬給個最大寬，高自適應的話有的圖又會由於是個長方形高超出了容器，這樣就不得不截掉一部分圖。於是就想著，首先不管圖片是個什麼比例，不管它是寬遠大於高或者高遠大於寬，統一設定最大的寬高值，不讓它超出容器，並且這樣處理圖片不會變形。接下來想怎麼處理圖片大小不定，在固定容器中水平垂直置中的問題。

參考連結：

張鑫旭：大小不固定的圖片和多行文字的垂直水平置中

w3cplus大漠：css製作圖片水平垂直置中

對比了一下他們的方法，發現張鑫旭的方法① 透明gif圖片+背景定位，我們做產品頁面都是用的img而不是背景，有點擔心後台會不好弄，所以一般不想用這種方法；方法② display:table-cell和文字大小控制置中，沒有連結，如果給圖片加了連結在ie7裡面錯位了，方法③ display:inline-block和文字大小控制置中，那個效果並不是自己想要的，方法④ 使用空白圖片實現垂直對齊，這方法感覺不如w3cplus大漠的簡便。

經過對比綜合考慮，總結出以下方法。

 

1.推薦使用方法（利用font-size:0與空白標籤） 

 

 

2.建議掌握技巧。利用display:table-cell與display:inline 

也許這種方法較第一種更為繁瑣，還得寫相容ie的hack，但是我覺得用display-table和vertical-middle在現代瀏覽器中實現圖片垂直置中是很值得學習的。如果以後不需要做低端瀏覽器的相容了，這種方法應該會更適合我。

 3.jquery方法。

將圖片轉換為其父元素的背景圖片，並且在其父元素中置中顯示背景圖片，然後在將其自身的透明度設定為“0”， 這樣也能達到圖片置中的效果。

這種方法主要是學習這種思路。但是我自己測試後發現並不適用於圖片很大的情況，那樣就算我把img設定了max-width,max-height也沒用。變成背景後它依然會顯示原圖大小。所以這裡就不貼出來了。有興趣的可以自己去看看上面大漠w3cplus的連結。