水平及垂直居中怎么弄，html2張圖片垂直居中,任意圖片實現垂直居中的三種方法(兼容性還不錯)

在網站開發過程中，可能會有希望圖片垂直居中的情況，而且，需要垂直居中的圖片的高度也不確定，這就會給頁面的布局帶來一定的挑戰。我總結了一下，曾經使用過的幾種方法來使圖片垂直居中，除了第一種方法只限于標準瀏覽器外，另外兩種方法的兼容性還不錯。

方法一：

水平及垂直居中怎么弄。將外部容器的顯示模式設置成display:table，這個設置的意思不用多說了吧… img標簽外部再嵌套一個span標簽，并設置span的顯示模式為display:table-cell，這樣span內部的內容就相當于表格，可以很方便的使用vertical-align屬性來對齊其中的內容了。

代碼如下：

復制代碼代碼如下:

css實現垂直水平居中，body {

height:100%;

}

css垂直居中的幾種方法？#box{

width:500px;height:400px;

display:table;

垂直居中怎么設置css？text-align:center;

border:1px solid #d3d3d3;background:#fff;

}

div上下居中，#box span{

display:table-cell;

vertical-align:middle;

}

#box img{

border:1px solid #ccc;

}

方法二：

標準瀏覽器的情況還是和上面一樣，不同的是針對IE6/IE7利用在img標簽的前面插入一對空標簽的辦法。

代碼如下：

復制代碼代碼如下:

body{

height:100%;

}

#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;

}

方法三：

在img標簽外包裹一個p標簽，標準瀏覽器利用p標簽的偽類屬性:before來實現居中，另外，對于IE6/IE7使用了CSS表達式來實現兼容。

代碼如下：

復制代碼代碼如下:

body {

height:100%;

}

#box{

width:500px;height:400px;

text-align:center;

border:1px solid #d3d3d3;background:#fff;

}

#box p{

width:500px;height:400px;

line-height:400px; /* 行高等于高度 */

}

/* 兼容標準瀏覽器 */

#box p:before{

content:"."; /* 具體的值與垂直居中無關，盡可能的節省字符 */

margin-left:-5px; font-size:10px; /* 修復居中的小BUG */

visibility:hidden; /*設置成隱藏元素*/

}

#box p img{

*margin-top:expression((400 - this.height )/2); /* CSS表達式用來兼容IE6/IE7 */

vertical-align:middle;

border:1px solid #ccc;

}

本人測試前兩個沒問題，第三個好像有問題