设置<img>图片垂直水平居中代码实例:
如果一个div内有一个图片，是不是感觉让图片垂直水平居中更为美观一些，当然不能一概而论，要看具体设计要求，不过垂直水平居中的应用不在少数，下面就通过一段代码实例介绍一下如何实现此效果。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
*
{
margin:0;
padding:0;
list-style:none;
}
img{border:none;}
.main
{
width:600px;
height:400px;
margin:100px auto;
background:#ddd;
}
.main a
{
display:table-cell;
vertical-align:middle;
text-align:center;
width:600px;
height:400px;
}
</style>
</head>
</p>
<p>
<body>
<div class="main"><a href="#"><img src="mytest/demo/small.jpg"></a></div>
</body>
</html>
以上代码实现了我们的要求，可以让图片在div垂直水平居中，其实是让图片在a中垂直水平居中，这里主要是利用以下属性实现的，代码如下:
display:table-cell; vertical-align:middle; text-align:center;
但是以上代码在IE7和IE6浏览器中并不兼容，不过上面的代码在将来一定会有更多的机会使用，因为那个时候将是标准浏览器的天下，当然可以使用定位方式显现图片垂直水平居中且兼容所有主流浏览器，这里就不多介绍了。
相关阅读:
1.display:table-cell属性可以参阅display:table、display:table-row和display:table-cell一章节。
2.vertical-align属性可以参阅CSS的vertical-align属性一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11775
更多内容可以参阅:http://www.softwhy.com/divcss/