垂直居中的方法有很多，在此记录一个我找到的简单好用的方法。

需要规定一个父DIV和一个子DIV，子DIV在父DIV里会垂直居中，然后把你想垂直居中的内容放在子DIV里就可以了。

chrome、firefox和IE均可用。IE只测试了Edge和IE11。

 1 <html>
 2 
 3 <head>
 4     <style>
 5         .vcenter-outter {
 6             display: table;
 7             background: green;
 8             width: 100%;
 9             min-height: 300px;
10         }
11 
12         .vcenter-inner {
13             display: table-cell;
14             text-align: center;
15             vertical-align: middle;
16         }
17 
18         .vcenter-inner span {
19             background: red;
20             width: 33%;
21             height: auto;
22         }
23     </style>
24 </head>
25 
26 <body>
27     <div class="vcenter-outter">
28         <div class="vcenter-inner">
29             <span>垂直居中</span>
30         </div>
31     </div>
32 </body>
33 
34 </html>

这个方法的好处是，如果你有多个不同类型的元素，都想在同一行垂直居中，那么你可以使用一个父DIV套住多个子DIV。

 1 <html>
 2 
 3 <head>
 4     <style>
 5         .vcenter-outter {
 6             display: table;
 7             background: green;
 8             width: 100%;
 9             min-height: 300px;
10         }
11 
12         .vcenter-inner {
13             display: table-cell;
14             text-align: center;
15             vertical-align: middle;
16         }
17 
18         .vcenter-inner span {
19             background: red;
20             width: 33%;
21             height: auto;
22         }
23     </style>
24 </head>
25 
26 <body>
27     <div class="vcenter-outter">
28         <div class="vcenter-inner">
29             <span>垂直居中的span</span>
30         </div>
31         <div class="vcenter-inner">
32             <ul>
33                 <li>垂直居中的ul</li>
34                 <li>垂直居中的ul</li>
35                 <li>垂直居中的ul</li>
36                 <li>垂直居中的ul</li>
37             </ul>
38         </div>
39         <div class="vcenter-inner">
40             <img>垂直居中的img</img>
41         </div>
42     </div>
43 </body>
44 
45 </html>

 

参考文章：http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201505121820.html