網頁製作實例:圖片真正居中的方法-HTML/Xhtml-網頁製作-網頁教學網
| 網頁製作Webjx文章簡介：讓圖片垂直居中的方法. |
圖片的寬度和高度是未知的，沒有一個固定的尺寸，在這個前提下要使圖片在一個固定了寬度和高度的容器中垂直居中，想想感覺還是挺麻煩的，由於最近的項目可能會用到這個方案，所以把一些常用的方法都收集整理了一下。
下圖是理想中的效果圖，外部容器的寬度和高度是固定的，中間的圖片寬度和高度未知，但是圖片要始終要相對於外部的容器垂直居中。
但是實際中實現的效果並不是很完美，由於各瀏覽器的解析都各不相同，所以各瀏覽器都會有1px-3px的偏差。
方法一 (XHTML 1.0 transitional)：
該方法是將外部容器的顯示模式設置成display:table，img標籤外部再嵌套一個span標籤，並設置span的顯示模式為display:table-cell，這樣就可以很方便的使用vertical-align象表格元素那樣對齊了，當然這只是在標準瀏覽器下，IE6/IE7還得使用定位。
HTML結構部分：
| <div id="box"> <span><img src="images/demo.jpg" alt=""></span></div> |
CSS樣式部分：
| <style type="text/css">?#box{width:500px;height:400px;display:table;text-align:center;border:1px solid #d3d3d3;background:#fff;}#box span{display:table-cell;vertical-align:middle;}#box img{border:1px solid #ccc;}</style><!--[if lte IE 7]><style type="text/css">?#box{position:relative;overflow:hidden;}#box span{position:absolute;left:50%;top:50%;}#box img{position:relative;left:-50%;top:-50%;}</style><![endif]--> |
方法二 (XHTML 1.0 transitional)：
方法二和方法一的實現的原理大同小異，結構也是相同的，方法一用的是條件注釋，方法二就用的CSS Hack。
CSS樣式部分：
| <style type="text/css">?#box{width:500px;height:400px;overflow:hidden;position:relative;display:table-cell;text-align:center;vertical-align:middle;border:1px solid #d3d3d3;background:#fff;}#box span{position:static;*position:absolute; /*針對IE6/7的Hack*/top:50%; /*針對IE6/7的Hack*/}#box img {position:static;*position:relative; /*針對IE6/7的Hack*/top:-50%;left:-50%; /*針對IE6/7的Hack*/border:1px solid #ccc;}</style> |
該方法有個弊端，在標準瀏覽器下由於外部容器#box的顯示模式為display:table-cell，所以導致#box無法使用margin屬性，並且在IE8下設置邊框也無效。
方法三 (XHTML 1.0 strict)：
標準瀏覽器還是將外部容器#box的顯示模式設置為display:table-cell，IE6/IE7是利用在img標籤的前面插入一對空標籤的辦法。
HTML結構部分：
| <div id="box"><i></i><img src="images/demo.jpg" alt=""></div> |
CSS樣式部分：
| <style type="text/css">?#box{width:500px;height:400px;display:table-cell;text-align:center;vertical-align:middle;border:1px solid #d3d3d3;background:#fff;}#box img{border:1px solid #ccc;}</style><!--[if IE]><style type="text/css">?#box i { display:inline-block; height:100%; vertical-align:middle }#box img { vertical-align:middle }</style><![endif]--> |
方法三也同樣適用XHTML 1.0 transitional。以上方法都是收集於網頁教學網，暫時只對這3個方法比較滿意，兼容性方面不錯，使用起來的限制也比較小，還有些方法我也都一一測試過，效果都不理想，在各瀏覽器中的差異比較大。另外司徒正美這裡也收集了一些方法。
思考：很多方法都是依賴於將外部容器的顯示模式設置成table才能實現垂直居中，也就是div來模擬table，如果CSS有一個屬性來實現這種效果那該多好。如果你也有好的方法，歡迎你來分享。
原文：http://stylechen.com/img-middle.html
推薦閱讀：
※個人網頁製作
※有哪些不用寫代碼就能輕鬆製作HTML5網頁的工具？
※【想啥學啥】小白入門網頁製作（HTML+CSS）
※網頁製作軟體大全