我看最近微博流行CSS居中技術(shù)，我看了幾編資料寫的都不多好，于是抽時(shí)間把相關(guān)資料整合了，具體內(nèi)容如下。

點(diǎn)擊此處下載源碼

效果展示：

要求:

1.盡可能兼容更多瀏覽器，這里兼容到ie7,ie6不支持max-*就不考慮了。

2.瀏覽器尺寸變化時(shí)，圖片總是等比例拉伸或縮放。

3.包裹圖片的div也是響應(yīng)式的，并且每個(gè)div的尺寸是一樣的。

4.圖片始終保持水平垂直居中。

5.圖片的行列數(shù)不變，這里一直都是3*3.

下面來(lái)搞定一個(gè)個(gè)要求。

滿足要求1意味著這里要盡量不使用高級(jí)瀏覽器才有的屬性，比如高級(jí)瀏覽器居中常用的什么

display:table-cell;vertical-align;center;flexboxtransform

。。。

如果不得不用這些屬性，也必須要有兼容低版本瀏覽器的替代方案。

要求2中圖片等比拉伸縮放在響應(yīng)式設(shè)計(jì)中很容易搞定。

直接對(duì)圖片img{max-width: 100%;}就可以了。外面的寬度就算設(shè)成比圖片寬度小的尺寸，圖片會(huì)填滿外面div,同時(shí)等比例的計(jì)算出圖片這時(shí)該有的高度。

可以看到圖片尺寸是640*480(4:3),外面div設(shè)成300px,圖片尺寸這時(shí)變?yōu)?00*225(4:3).

然后是要求2里面的瀏覽器尺寸變化。這個(gè)也容易，把外面div的寬度寫成百分百就可以了。

可以看到不管外面div尺寸怎么變，圖片的寬高比始終沒(méi)變。

然后是要求3,外面div響應(yīng)式。

第一反應(yīng)是把尺寸設(shè)置成百分百。比如最上面的效果，一行有三張圖片。把每個(gè)包裹圖片的div寬度設(shè)成33.3%;那這時(shí)div還會(huì)像里面的圖片一樣，等比例縮放或拉伸，div的高度就會(huì)參差不齊。

<div id='wrap'>  <ul>   <li>    <p><img src="1.jpg"></p>   </li>      .....  </ul> </div>*{  margin: 0;  padding:0; } li{  list-style-type: none;  display:inline-block;  vertical-align: middle;  max-width: 200px;  width: 32%;  border:1px solid red; } img{  max-width: 100%;  max-height: 100%;  display: inline-block;  vertical-align: middle; } #wrap{  max-width: 620px;  font-size: 0; }

可以看到第一張圖片的高度已經(jīng)超過(guò)200px,因?yàn)榈谝粡垐D片是寬度小于高度，很顯然這時(shí)應(yīng)該以高度為基準(zhǔn)，寬度等比例縮放。如果在圖片父元素加overflow:hidden;就看不到大豬的豬腳了。

那么到底怎么做才能讓外面div響應(yīng)式？

padding-top:100%;

<div id='wrap'>  <ul>   <li>    <div class="dummy"></div>   </li>      ...  </ul> </div>  *{  margin: 0;  padding:0; } li{  list-style-type: none;  float: left;  display: block;  max-width: 200px;  width: 32%;  border:1px solid red; } .dummy{  padding-top: 100%; } #wrap{  max-width: 620px;  font-size: 0; }

這里寬高比是1:1.如果寬高比是4:3，就設(shè)成padding-top: 75%;，其他的以此類推。

要求3是搞定，下面是要求4。

先把圖片放進(jìn)去。

這時(shí)讓圖片脫離文檔流，并把圖片整個(gè)鋪滿。

 img{  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  max-width: 100%;  max-height: 100%;  display: block;  margin: 0 auto;  border: 2px solid blue; }

同時(shí)把包裹圖片div position:relative;

注意到上面圖片margin:0 auto;,已經(jīng)可以水平居中了。

下面就只差一個(gè)圖片垂直居中了，要求5只需在最外面div設(shè)置一個(gè)max-width就可以設(shè)置一行的列數(shù)了。

垂直居中有很多方法，但是這里圖片position:absolute;，很容易想到設(shè)置margin:auto;padding:auto;就可以讓脫離文檔流的圖片水平垂直居中。參見(jiàn)Absolute Horizontal And Vertical Centering In CSS。

但是這種方法對(duì)ie7無(wú)效。因此只有在圖片外面再加一層div.

這里本