在开发中偶遇需要一个元素垂直居中的需求，之前都是水平居中，垂直居中使用的比较少，经过一通研究，选择了几种相对比较实用的方案分享，抛砖引玉，如有遗漏不足，还望不吝指正。
方案一（IE7下该方案无法实现垂直居中）：
通过设置父级的的块属性实现，将父级元素手动转换位display:table-cell属性，然后使用表格的vertical-align: middle属性，实现元素的垂直居中，子元素继续使用margin:0 auto;实现水平居中即可
代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .container{ 12 width: 500px; 13 height: 500px; 14 display: table-cell; 15 vertical-align: middle; 16 background: green; 17 } 18 .box{ 19 width: 100px; 20 height: 100px; 21 background: #f00; 22 margin: 0 auto; 23 } 24 </style> 25 </head> 26 <body> 27 28 <div class="container"> 29 <div class="box"></div> 30 </div> 31 </body> 32 </html>
方案二（IE7下该方案无效）：
使用position:absolute,设置left、top、bottom、right、margin的属性
代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .box{ 12 width: 100px; 13 height: 100px; 14 background: #f00; 15 position: absolute; 16 top: 0; 17 left: 0; 18 bottom: 0; 19 right: 0; 20 margin: auto; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="box"></div> 26 </body> 27 </html>
方案三（完美兼容）：
使用position:absolute,设置left、top、margin-left、margin-top的属性，这种方法基本浏览器都能够兼容，不足之处就是需要固定宽高。
代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .box{ 12 width: 100px; 13 height: 100px; 14 background: #f00; 15 position:absolute; 16 top:50%; 17 left:50%; 18 margin-top:-50px; 19 margin-left:-50px; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="box"></div> 25 </body> 26 </html>