图片垂直水平居中

转载于：http://www.jiaoben8.cn/Article-id180.html

图片垂直水平居中，为了什么？为了好看，所以我们希望图片垂直水平居中，而不是设置为背景。。

css呈现：

<style>
* {margin:0;padding:0}
img{
position:static;
*position:relative; top:-50%;
left:-50%;
max-height:175px;
max-width:175px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none; 
}
.wai {
   width: 185px; height:188px;position: relative; display: table-cell;vertical-align: middle; text-align:center;
}
.nei{
 position: static;*position:absolute;top:50%;
}
  ul{
margin: 0px;
padding: 0px;
}
ul li{
list-style:none;
width:188px;
float:left;
height: 188px;
margin: 5px;
position:relative;
background-image: url(images/img_bg.gif);
background-repeat: no-repeat;
background-position: center center;
border: 2px solid #F2F2F2;
}
</style>

html代码呈现：

<div style="margin:0 auto; width:420px; margin-top:90px">
<ul>
<li><div class='wai'><div class='nei'><a href="http://www.jiaoben8.cn"><img src="image/01.jpg" /></a></div></div></li>
<li><div class='wai'><div class='nei'><a href="http://www.jiaoben8.cn"><img src="image/cancelHover.png" /></a></div></div></li>
<li><div class='wai'><div class='nei'><a href="http://www.jiaoben8.cn"><img src="image/20110805111038873858.png" /></a></div></div></li>
<li><div class='wai'><div class='nei'><a href="http://www.jiaoben8.cn"><img src="image/loadingdata.gif" /></a></div></div></li>
</ul>
</div>

演示效果：http://www.jiaoben8.cn/Specia-id181.html