标签：
自己总结的一些方法法：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 .box{ 8 width:800px; 9 height:600px; 10 border:2px solid #000; 11 text-align:center; 12 } 13 span{ 14 display:inline-block; 15 height:100%;
16 vertical-align:middle; 17 } 18 img{ 19 vertical-align:middle; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="box"> 25 <img src="bigptr.jpg" /><span></span> 26 </div> 27 </body> 28 </html>
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 .box{ 8 width:800px; 9 height:600px; 10 border:2px solid #000; 11 display:table; 12 position:relative; 13 overflow:hidden; 14 } 15 span{ 16 display:table-cell; 17 text-align:center; 18 vertical-align:middle; 19 *position:absolute; 20 left:50%; 21 top:50%; 22 } 23 img{ 24 *position:relative; 25 vertical-align:top; 26 left:-50%; 27 top:-50%; 28 } 29 </style> 30 </head> 31 <body> 32 <div class="box"> 33 <span><img src="bigptr.jpg" /></span> 34 </div> 35 </body> 36 </html>
http://www.cnblogs.com/rubylouvre/archive/2010/07/08/1774025.html
http://bbs.blueidea.com/thread-2666987-1-1.html
1 <html lang="en"> 2 <head> 3 <meta charset="utf-8" /> 4 <meta content="IE=8" http-equiv="X-UA-Compatible"/> 5 <title>CSS垂直居中</title> 6 <style type="text/css"> 7 .box{ 8 /*IE8与标准游览器垂直对齐*/ 9 display: table-cell; 10 vertical-align:middle; 11 width:500px; 12 height:500px; 13 background:#B9D6FF; 14 border: 1px solid #CCC; 15 } 16 .box img{ 17 display:block; 18 margin:0 auto; 19 text-align:center; 20 margin-top:expression((500 - this.height )/2);/*让IE567垂直对齐 */ 21 } 22 </style> 23 </head> 24 <body> 25 <h1>垂直居中（CSS表达式）</h1> 26 <div class="box"> 27 <img src="img src="bigptr.jpg" />28 </div> 29 </body> 30 </html>
标签：
原文地址：http://www.cnblogs.com/dorislyx/p/5045929.html
