<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>方法3 - 未知高度的圖片垂直居中 - www.cleanthem.com</title>
<style type="text/css">
body {
height:100%; margin:0; padding:0;
}
#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="right_logo.jpg" alt="" /></p>
</div>
</body>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>方法3 - 未知高度的圖片垂直居中 - www.cleanthem.com</title>
<style type="text/css">
body {
height:100%; margin:0; padding:0;
}
#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="right_logo.jpg" alt="" /></p>
</div>
</body>
</html>
此代碼經過本人測試，在主流瀏覽器裏都有效、
