<!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"> .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编码*/ 200px; height:200px; border: 1px solid #ccc; } .box img { /*设置图片垂直居中*/ vertical-align:middle; } </style> </head> <body> <div class="box"> <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /> </div> </body> </html>
二、利用图片方法
<!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">
.itm{border:2px solid #ccc;300px;height:300px;text-align:center;}
.blank{0;height:100%;}
.itm img{vertical-align:middle;}
</style>
</head>
<body>
<div class="itm">
<img src="http://lite-ext.googlecode.com/svn/trunk/lite-ext/playground/vertical-center/blank.gif" class="blank" alt="xx"/>
<a href="#"><img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" alt="yy"/></a>
</div>
</body>
</html>
三、奇葩的方法啊！！ 用<button>
<button style="border:1px solid #ccc; background:none;"><img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" alt=""></button>
四、CSS表达式法
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* { margin:0; padding:0; }
.box { 300px; height:300px; border:1px solid #ccc; margin:20px; text-align:center; line-height:300px; }
.box img { vertical-align:middle; _display:block; _margin-top:expression((300 - this.height )/2); }
</style>
</head>
<body>
<div class="box">
<img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" alt="">
</div>
</body>
</html>
五、背景图片方法
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin:0; padding:0; } .box { 300px; height:300px; border:1px solid #ccc; background:url(http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg) no-repeat center; } </style> </head> <body> <div class="box"> </div> </body> </html>
六、表格
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin:0; padding:0; } .box { 300px; height:300px; border:1px solid #ccc; } </style> </head> <body> <div class="box"> <table width="100%" height="100%"> <tr> <td align="center" valign="middle"><img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" alt=""></td> </tr> </table> </div> </body> </html>
七：绝对定位
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* { margin:0; padding:0; }
.box { 300px; height:300px; border:1px solid #ccc; position:relative; display:table-cell; vertical-align:middle; text-align:center; }
.box p { +position:absolute; top:50%; }
.box img { +position:relative; top:-50%; left:-50%; }
</style>
</head>
<body>
<div class="box">
<p><img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" alt=""></p>
</div>
</body>
</html>
八、用display:inline-block
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* { margin:0; padding:0; }
.box { 300px; height:300px; border:1px solid #ccc; vertical-align:middle; text-align:center; }
.box span { display:inline-block; vertical-align:middle; height:100%; }
.box img { vertical-align:middle; }
</style>
</head>
<body>
<div class="box">
<span></span>
<img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" alt="">
</div>
</body>
</html>
九、writing-mode
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin:0; padding:0; } .box { 300px; height:300px; border:1px solid #ccc; line-height:300px; text-align:center; } .box span { height:100%; writing-mode:tb-rl; } /* IE 6 */ .box img { vertical-align:middle; } </style> </head> <body> <div class="box"> <span> <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" alt=""> </span> </div> </body> </html>