图像在div 内垂直居中

星期一, 2013-08-12 19:17 — shiping1

1)一种方法
<!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=GB2312" />
<title>无标题文档</title>
<style type="text/css">
.psdthumb { height: 1%; overflow: hidden; display:table; border-spacing:10px; }
.psdthumb li {border:1px solid #aaa; width:240px; height:160px; text-align:center; vertical-align:middle; position:relative; margin: 10px; *float:left; display: table-cell; }
.psdthumb .qq { *position:absolute; top:50%; }
.psdthumb .qq img { *position:relative; top:-50%; left:-50%; }
</style>
</head>

<body>
<div class="psdthumb">
<li><div class="qq"><img src="http://mat1.qq.com/www/images/allskin/wmlogo.gif" ></div></li>
<li><div class="qq"><img src="http://img1.cache.netease.com/cnews/netease/logo_w.gif" ></div></li>
</div>
<p>查找更多代码，请访问：<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>
</body>
</html>
来自 http://www.lanrentuku.com/js/css-685.html

2)二种方法 使用table 来实现垂直居中
<div style="height:300px;background:#DEDEDE;margin:10% 10%;">
<table height=100% width=100%>
<tr valign=middle align=center>
<td><img src=http://dotnet.aspx.cc/Images/logoSite.gif /></td>
</tr>
</table>
</div>
来自 http://bbs.csdn.net/topics/100025785
3)三种方法
<div class="tb-p-c"><img src="http://www.zjt.com.cn/images/logo/logo_index.gif" /></div>
样式：
.tb-p-c{
display: table-cell;
vertical-align:middle;
width:140px;
height:140px;
text-align:center;
*display: block;
*font-size: 122px;
background:red;
}
.tb-p-c img {
vertical-align:middle;
}
这段代码可以帮助你居中，不过有瑕疵，就是当图片过大的时候在火狐里不会剪切图片，所以要控制图片的高宽<=容器的高宽

来自 http://zhidao.baidu.com/question/74169306.html

4)四种方法

html代码:

</div>

css代码：

.pic{overflow:hidden;position:relative;display:table-cell;text-align:center;vertical-align:middle; float:none;}

.pic span{position:static;+position:absolute;top:50%; margin:0pt;}

.pic img{position:static;+position:relative;top:-50%;left:-50%; display :inline;}

来自 http://blog.csdn.net/bestdowt1314/article/details/3138566

5) 五种方法