垂直居中是CSS布局中十分常见的布局效果，在平时的工作中遇到的垂直居中布局大概分为以下的几类：
1，首先是单行文本居中，非常简单，只需要设置父级元素的高和行高相等，或者设置本身元素为内联块或者块元素，再设置高和行高相等就可以。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .sp1{ 8 height:100px; 9 line-height:100px; 10 border:1px solid red; 11 } 12 .sp2{ 13 display:inline-block; 14 height:50px; 15 line-height:50px; 16 border:1px solid blue; 17 } 18 </style> 19 </head> 20 <body> 21 <div class="sp1"><span>我是单行文本，我需要垂直居中1</span></div> 22 <span class="sp2">我是单行文本，我需要垂直居中2</span> 23 </body> 24 </html>
效果如下：
------------------------------------------------------------------------------------------------------------------------------------------------------
2，第二种遇到比较多的就是多行文本和图片以及按钮，类似这种。
小白遇到这种图文处理就会无从下手，当初我对CSS一知半解，写类似的布局会用很多比较2的方法，绝对定位，相对定位，margin,padding基本都会被我用到，总算是稀里糊涂给糊弄过去了，下来查了查资料，发现此布局的写法简单的令人发指，在这里分享给前段路上的小白们，一起学习进步，人不怕笨，但一定要勤奋。
2，代码如下：
首先要给父元素设置宽高，然后设置display:table;意思是此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
然后在子元素设置display:table-cell;意思是此元素会作为一个表格单元格显示（类似 <td> 和 <th>）;
有了这些属性之后，给子元素设置垂直居中vertical-align:middle，大功告成。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 8 </style> 9 </head> 10 <style> 11 *{ 12 margin: 0; 13 padding: 0; 14 } 15 .box1{ 16 width: 100%; 17 height: 180px; 18 font-family: "微软雅黑"; 19 color: #ffffff; 20 background: black; 21 display: table; 22 } 23 .box2{ 24 width: 140px; 25 text-align: center; 26 display: table-cell; 27 vertical-align: middle; 28 } 29 .box2 .img{ 30 width: 100px; 31 height: 100px; 32 line-height: 100px; 33 display: inline-block; 34 background: rgb(255,209,97); 35 border-radius: 50%; 36 text-align: center; 37 color: #000000; 38 } 39 .box3{ 40 display: table-cell; 41 vertical-align: middle; 42 } 43 .btn{ 44 display: table-cell; 45 vertical-align: middle; 46 } 47 input{ 48 width: 170px; 49 height: 60px; 50 font:bold 30px "微软雅黑"; 51 background: rgb(255,209,97); 52 border: none; 53 border-radius: 4px; 54 } 55 </style> 56 <body> 57 <div class="box1"> 58 <div class="box2"> 59 <span class="img">我是图片</span> 60 </div> 61 <div class="box3"> 62 <h1>商家入驻</h1> 63 <p>平台优势，成单量更有保证，销量与品牌双重提升</p> 64 </div> 65 <div class="btn"> 66 <input type="button" value="立即入住"/> 67 </div> 68 </div> 69 </body> 70 </html>
——————————————————————————————————————————————————————————————————————-——————