<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cn" >
<head>
<title>未知大小图片在已知大小容器水平/垂直居中</title>
<style type="text/css">
.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
width:200px;
height:200px;
border: 1px solid #EEE;
float:left;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}
</style>
<body onload="int()">
<div>
<img src="http://www.baidu.com/img/baidu_logo.gif" />
</div>
<div>
<img src="http://bbs.blueidea.com/images/default/logo.gif" />
</div>
<div>
<img src="http://www.baidu.com/img/baidu_logo.gif" />
</div>
<div>
<img src="http://bbs.blueidea.com/images/default/logo.gif" />
</div>
<div>
<img src="http://www.baidu.com/img/baidu_logo.gif" />
</div>
<div>
<img src="http://bbs.blueidea.com/images/default/logo.gif" />
</div>
<div>
<img src="http://www.baidu.com/img/baidu_logo.gif" />
</div>
<div>
<img src="http://bbs.blueidea.com/images/default/logo.gif" />
</div>
<div>
<img src="http://www.baidu.com/img/baidu_logo.gif" />
</div>
<div>
<img src="http://bbs.blueidea.com/images/default/logo.gif" />
</div>
<script language="javascript">
<>
</script>
</body>
</html>
【CSS设置未知大小图片在已知大小容器水平垂直居中】相关文章：
★ CSS布局：图片在DIV中上下左右居中(水平和垂直都居中)
★ 纯CSS无表达式实现未知尺寸图片等比缩放(支持IE7及以上)