垂直居中的方法有很多，在此记录一个我找到的简单好用的方法。
需要规定一个父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
CSS实现垂直居中
原文地址：https://www.cnblogs.com/xxnn/p/9244785.html