希望圖片垂直置中的情況在網站開發過程中會遇到很多，我總結了一下，曾經使用過的幾種方法來使圖片垂直置中，除了第一種方法只限於標準瀏覽器外，另外兩種方法的相容性還不錯，感興趣的朋友可以瞭解下
在網站開發過程中，可能會有希望圖片垂直置中的情況，而且，需要垂直置中的圖片的高度也不確定，這就會給頁面的布局帶來一定的挑戰。我總結了一下，曾經使用過的幾種方法來使圖片垂直置中，除了第一種方法只限於標準瀏覽器外，另外兩種方法的相容性還不錯。
方法一：
將 外部容器的顯示模式設定成display:table，這個設定的意思不用多說了吧… img標籤外部再嵌套一個span標籤，並設定span的顯示模式為display:table-cell，這樣span內部的內容就相當於表格，可以很 方便的使用vertical-align屬性來對齊其中的內容了。
代碼如下：
複製代碼代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>方法1 - 未知高度的圖片垂直置中</title>
<style type="text/css">
body {
height:100%;
}
#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]-->
</head>
<body>
<div id="box">
<span><img src="images/demo_zl.png" alt="" /></span>
</div>
</body>
</html>
方法二：
標準瀏覽器的情況還是和上面一樣，不同的是針對IE6/IE7利用在img標籤的前面插入一對空標籤的辦法。
代碼如下：
複製代碼代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>方法2 - 未知高度的圖片垂直置中</title>
<style type="text/css">
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;
}
</style>
<!--[if IE]>
<style type="text/css">
#box i {
display:inline-block;
height:100%;
vertical-align:middle
}
#box img {
vertical-align:middle
}
</style>
<![endif]-->
</head>
<body>
<div id="box">
<i></i><img src="logo.png" alt="" />
</div>
</body>
</html>
方法三：
在img標籤外包裹一個p標籤，標準瀏覽器利用p標籤的偽類屬性:before來實現置中，另外，對於IE6/IE7使用了CSS運算式來實現相容。
代碼如下：
複製代碼代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>方法3 - 未知高度的圖片垂直置中</title>
<style type="text/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;
}
</style>
</head>
<body>
<div id="box">
<p><img src="images/demo_zl.png" alt="" /></p>
</div>
</body>
</html>
本人測試前兩個沒問題，第三個好像有問題
