<!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″ />
<title>无标题文档</title>
<style type=”text/css”>
.blue_idea{
width:180px;
height:100px;
border:#f00 1px solid;
text-align:center;
display:table;
}
.blue_idea span{
vertical-align:middle;
display:table-cell;
}
img{
border:#333 1px solid;
}
</style>
<!–[if lte IE 7]>
<style type=”text/css”>
.blue_idea{
position:relative;
overflow:hidden;
}
.blue_idea span{
position:absolute;
top:50%;
left:50%;
}
.blue_idea img{
position:relative;
left:-50%;
top:-50%;
}
</style>
<![endif]–></head>
<body>
<div>
<span><img src=”logo.gif” width=”111″ height=”18″ /></span>
</div>
</body>
</html>
方法二:
.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; } .box img { /*设置图片垂直居中*/ vertical-align:middle; } <div class="box"> <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /> </div>
方法三:(经测试IE7\8,FireFox,Chorme通过)<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <style type="text/css"> .outer{ width:100px; height:100px; line-height:100px; text-align:center; float:left; margin-right:30px; border:solid 1px #ccc;} .outer img{position:static; top:-50%; left:-50%; vertical-align:middle;} </style> </head> <body> <div class="outer"> <img src="" /> </div> </body> </html>