<!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" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta name="description" content="web前端，杭州小白的个人博客，小白的个人博客" />
<meta name="keywords" content="web前端，杭州小白，小白" />
<title>CSS实现图片完美垂直居中,div居中，兼容IE6,7,8,火狐等主流浏览器</title>
<!--方法一-->
<style>
.box1{
display:table-cell;
vertical-align:middle;
text-align:center;
900px;
height:500px;
border:1px solid #000;
*display:block;/*针对IE的hack*/
*font-size:436px;/*高度的0.873*/
*font-family:Arial;/*防止非utf-8下hack失效*/
}
.box1 img{ vertical-align:middle;}
</style>
<!--方法二-->
<style type="text/css">
.box2 {
display:table-cell;
height:500px;
900px;
text-align:center;
border:1px solid #000;
vertical-align:middle;
}
</style>
<!--[if IE]>
<style type="text/css">
i {
display:inline-block;
height:100%;
vertical-align:middle
}
img {
vertical-align:middle
}
</style>
<![endif]-->
<style type="text/css">
body{ 900px; margin:0 auto;}
*{ margin:0; padding:0; list-style:none; font-size:14px;}
/*---该css reset仅用于demo，请自行换成适合您自己的css reset---*/
html { height:100%;}
.box{ height:500px; 900px; background-color:#333;}
.box { text-align:center;}
.centerDiv { display:inline-block; zoom:1; *display:inline; vertical-align:middle; text-align:left; 200px; height:100px; border:1px solid #f60; background:#fc0;}
.hiddenDiv { height:100%; overflow:hidden; display:inline-block; 1px; overflow:hidden; margin-left:-1px; zoom:1; *display:inline; *margin-top:-1px; _margin-top:0; vertical-align:middle;}
</style>
</head>
<body>
<!--图片居中-->
<div class="box1">
<img src="http://www.google.com/intl/en/images/logo.gif" width="276" height="110" />
</div>
<div class="box2">
<i></i><img src="http://www.baidu.com/img/logo.gif" alt=""/>
</div>
<!--div居中-->
<div class="box">
<div class="centerDiv"></div>
<div class="hiddenDiv"></div>
</div>
<p style="height:50px; line-height:50px; text-align:center;"><a href="http://www.xiaobai8.com" target="_blank">返回首页</a></p>
</body>
</html>
