1、打開在線寫前端代碼的網(wǎng)站如jsrun或者jsfiddle。

目2、標(biāo)是做一個(gè)如圖所示的效果，不同大小的圖片。

3、每個(gè)方框的html 如下，

4、css如下，其中需要注意的是，不要設(shè)置最外層div的大小，只設(shè)置span的大小，讓span的大小決定div的大小。

其中

display: table-cell;

text-align: center;

vertical-align: middle;

這3行決定居中效果。

其中

img {

max-width: 100%;

max-height: 100%;

}

的目的是讓圖片可以縮放而比例不變。

div {

float:left;

margin:5px;

padding:5px;

border:1px solid #000;

}

span {

font-size: 0;

width: 150px;

height: 150px;

display: table-cell;

text-align: center;

vertical-align: middle;

}

img {

max-width: 100%;

max-height: 100%;

}

5、效果如下，很好的實(shí)現(xiàn)居中。

6、上面是div為float的情況

div如果是absolute或fixed也可以正常表現(xiàn)。

只有一個(gè)div的情況下，代碼如下

div {

margin:5px;

padding:5px;

border:1px solid #000;

position: absolute;

left:100px;

top:100px;

}

span {

font-size: 0;

width: 150px;

height: 150px;

display: table-cell;

text-align: center;

vertical-align: middle;

}

img {

max-width: 100%;

max-height: 100%;

}

7、這張圖片仍然是居中的，沒有收到父容器的影響。