垂直居中的方法有很多，在此记录一个我找到的简单好用的方法。
需要规定一个父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