垂直居中是网站中一种常见的需求，常见的垂直居中效果和实现如下
1、具有固定宽高的div垂直居中
2、单行文本垂直居中
3、多行文本处置居中
4、图片垂直居中
案例与实现方法前点击链接：
http://www1.pconline.com.cn/magazine/20170220/test3.html
代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style> *{ /*outline: 1px solid red;*/ } body{ text-align: center; } .div1{ width: 200px; height: 200px; margin:auto; position: relative; border:1px solid green; } .div11{ width: 100px; height: 100px; position: absolute; top:50%; left:50%; margin-left:-50px; margin-top:-50px; outline: 1px solid red; } .div2{ width: 200px; height: 200px; border:1px solid blue; margin:auto; margin-top: 20px; text-align: center; } .span22{ text-align: center; line-height: 200px; } .div3{ width: 800px; height: 400px; margin:auto; border: 1px solid blue; margin-top: 20px; text-align: center; vertical-align: middle; } .div3 img{ vertical-align: middle; } .span33{ display: inline-block; width: 0px; height: 100%; vertical-align: middle; } .div4{ width: 200px; height: 200px; margin:auto; border: 1px solid red; margin-top:20px; position: relative; } </style> </head> <body> <h3>1、具有固定宽高的div垂直居中</h3> <div class="div1"> <div class="div11">div11</div> </div> <h3>2、单行文本垂直居中</h3> <div class="div2"> <span class="span22"> hello world </span> </div> <h3>3、多行文本处置居中</h3> <div class="div4"> <div class="div44">hello helo heloo heloo woe o egaghrbqrb naobjo bnorebjoqr bneojb beorb oqer nojoqfjobq</div> </div> <script> var div44 = document.querySelector(".div44"); div44W = div44.offsetWidth; div44H = div44.offsetHeight; div44.style.marginLeft=(div44.parentNode.offsetWidth-div44W)/2+"px"; div44.style.marginTop =(div44.parentNode.offsetHeight-div44H)/2+"px"; </script> <h3>4、图片垂直居中</h3> <div class="div3"> <span class="span33"></span> <img src="a.jpg" alt=""> </div> </body> </html>