本文转载自:IT技术精粹 http://www.jishubu.com
一下是网页代码,把以下全部代码粘贴到DW的代码模式,去不覆盖即可!
方法一(CSS)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片在div中垂直居中</title>
<style type="text/css">
body { margin:0; padding:0; text-align:center;}
* { margin:0; padding:0; }
/* .img_vm{ margin:100px; padding:10px; 500px; height:500px; vertical-align:middle; border:1px dashed red; background:url(images/exampleimg/example_02.jpg) no-repeat center;} */ /* 背景图片垂直居中 */
.img_vm { margin:100px auto; padding:0; 600px; height:500px; border:1px dashed red; text-align:center; vertical-align:middle; position:relative; line-height:500px; font-size:0;}
.img_vm P{+position:absolute;top:50%; }
.img_vm P img { +position:relative;top:-50%; left:-50%; vertical-align:middle;}
.img_vm p:after {content:".";font-size:1px;visibility:hidden;} /* 此样式专对火狄浏览器还设 */
</style>
</head>
<body>
<div class="img_vm"><p><img src="img/pic01.jpg" /></p></div>
</body>
</html>
方法二(JavaScript)
<div style=" text-align:center;border:solid #006633 1px; 200px; height:200px; padding:0; font-size:0; line-height:0;">
<img src="http://bbs.51js.com/images/default/logo.gif" onload="this.style.marginTop=((this.parentElement.offsetHeight-this.offsetHeight)/2);" style="margin-top:0px;" />
</div>
方法三(CSS)至今为止最简洁的方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div图片垂直居中的方法</title>
</head>
<style>
.box {
display: table-cell;
vertical-align:middle;
text-align:center;
*display: block;
*font-size: 175px;
*font-family:Arial;
200px;
height:200px;
border: 1px solid #eee; }
.box img {
vertical-align:middle; border:0;}
</style>
<body>
<div class="box">
<a href="http://www.howpm.com" target="_blank"><img src="http://howpm.com/images/dz7/logo.gif" /></a>
</div>
</body>
</html>