讓圖片居中和文字居中是不一樣的，文字居中可以通過line-height等調整，讓圖片居中方法，參考各種資料博文和測試 目前接觸兩種方法 display:table-cell和偽元素：after方法
一，display:table-cell
這個屬性是讓元素以表格單元格的形式呈現類似table標簽中的td，其他現代瀏覽器和ie8+都是支持的 ie6/7是不支持的（當然下面也有解決方法）、
如果只看table元素 就兩個特點：
1，同行等高
2，寬度自動調整
那么table-cell是不是也具有這個特點呢，答案是:yes;為什么呢？
css中有一個有意思的規則“創建匿名表格元素”。拿table-cell來扯，就是，當某個元素被設置為display:table-cell的時候，如果她的父節點不是display：table-row，爺爺節點不是display:table，那么下面就是見證奇跡的時候，這個兒子生出了他的爸爸和爺爺（瀏覽器會自動創建者兩個匿名盒對象）雖然你找不到你的father 和 grandfather，但這確實發生了。
看下下面兩種情況 來了解下這個不可思議的事情，代碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table-cell</title> <style> div{padding:10px 0;} .classtd, td{height:34px; padding:10px; margin:10px; border:1px solid #ccc; vertical-align:middle;} .classtd{display:table-cell; border-color:#cc0;} </style> </head> <body> <div class="classtd">tom</div> <div class="classtd">jack</div> <div>普通 div</div> <div class="classtd">angel</div> <div>======= 上面是div 下面是table ========</div> <table cellpadding="0" cellspacing="0"> <tr> <td class="dtc">tom</td> <td class="dtc">jack</td> </tr> </table> <table style="margin-top:10px;" cellpadding="0" cellspacing="0"> <tr> <td>angel</td> </tr> </table> </body> </html>
然后就可以下結論了：
tom 和 jack ，生出了父親和爺爺（瀏覽器會創建一個表格來包裹相鄰的display:table-cell元素），表現和第一個表格相同。angel自己生出了父親和爺爺表現和第二個表格相同。
既然是這樣，那么想了解table-cell，就是變相了解表格的td了。那就回到了前面所說的兩個特點：同行等高，寬度自動調節。我們就可以拿這個貨來作等高布局：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>img</title> <style> div{ width: 500px; height: 500px; background: #eee; text-align: center; display: table-cell; vertical-align: middle;} div img{ vertical-align: middle;} </style> </head> <body> <div class="im-box"> <img src="images/05.jpg"> </div> </body> </html>
很好 元素img居中顯示了，但在ie7中的顯示卻是這樣的 ，上面也提到了table-cell在ie6/7不支持
如何解決讓ie6/7也支持table-cell，我的解決方法是讓其布局結構多加個盒子用相對絕對定位使其居中，當然或許還有更好的方法，但我目前還不知道，這樣多加個div用*hack寫的樣式在其他現代瀏覽器里也不影響，可以統一使用這樣的布局樣式，代碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>img</title> <style> div.im-box{ width: 500px; height: 500px; background: #eee; text-align: center; display: table-cell; vertical-align: middle; *position: relative;} div.im-cont{ *position: absolute; *top: 50%} div.im-cont img{ vertical-align: middle; display: inline; *position: relative; *top: -50%; *left: -50%;} </style> </head> <body> <div class="im-box"> <div class="im-cont"> <img src="images/05.jpg"> </div> </div> </body> </html>
顯示如：
這樣就可以讓在ie7中居中顯示。
二，偽元素：after
偽元素after/before+content我們知道可以給元素生成內容，content屬性在css2就已被引入被大多瀏覽器支持 (Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+)ie8以下還是不支持。其生成內容就不說了，看下偽元素的其他實用的用法。
1，:after+content清楚浮動
我們知道盒子中如果元素浮動，那么盒子就會高度塌陷 如
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>偽元素</title> <style> div{ padding: 10px; background: yellow;} div img{ float: left;} </style> </head> <body> <div class="im-box"> <img src="images/05.jpg" alt=""> </div> </body> </html>
通常 我們解決這樣的方法有overflow:hidden/auto；添加空div並clear:both;給子元素設置高度等 現在我們用：after來解決浮動問題
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>偽元素</title> <style> div{ padding: 10px; background: yellow; *zoom:1;} div:after{display:block; content:"clear"; height:0; clear:both; overflow: hidden; visibility:hidden;} div img{ float: left;} </style> </head> <body> <div class="im-box"> <img src="images/05.jpg" alt=""> </div> </body> </html>
需要解釋的是偽元素在ie8下不支持 所以我們用ie的私有縮放屬性*zoom來解決浮動的破壞 在ie7下展示如下
很好，用：after+zoo來解決浮動帶來的破壞 比其他方法最實用，且不產生多余標簽；
2，:after+content讓大小不固定圖片居中
上面介紹了用table-cell讓其劇中的方法，來看下偽元素使其居中怎么做到
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>img</title> <style> div.im-box{ width: 500px; height: 500px; background: #eee; text-align: center; font-size:0; *font-size:200px;} div.im-box:after{ display: inline-block; width: 0; height: 100%; content: 'center'; vertical-align: middle; overflow: hidden;} div img{ vertical-align: middle; } </style> </head> <body> <div class="im-box"> <img src="images/05.jpg"> </div> </body> </html>
與清除浮動影響類似，IE6/7不支持:after偽類，我們可以用另外的方法讓圖片垂直居中，例如font-size方法，設一個比較大點的字體大小，IE6/7就可以實現圖片垂直對齊了，至於其他瀏覽器，就用:after偽類+content內容生成一個vertical-align:middle屬性的元素就可以了。