css:.example{width:400px;背景：#afddf3；line-height:50px;}作用：2.line-height+inline-block的原理：把多个元素或者多行元素当成一个行元素，所以我们必须把这些数据再打包一层，设置为inline-堵塞。由于inline-block在不同的浏览器中会有空隙，设置父元素font-size:0消除，从而达到完美的垂直居中。CSS:.example2{宽度：400px;边框：1px实心#dcdcdc；行高：100px；font-size:0;}.example2.con{display:inline-block;行高：2；垂直对齐：中间；宽度：300px；字体大小：15px；背景：#afddf3;}3.:before+inline-block原理：:before伪类元素带有inline-block属性的写法应该是很传统的垂直居中技术，这种方式的好处是子元素的高度无需特殊设置即可居中。我们将使用:before伪类元素设置100%inline-block的高度，然后将需要居中的子元素设置为inline-block。block属性后可以使用vertical-align:middle来达到垂直居中的目的。这个方法在以往其实是一个很好的垂直居中解决方案，但是需要专门处理inline-block元素之间的4-5px不要怕空间小的缺陷，设置父元素font-size即可:0和子元素字体大小：15px。css:.example3{margin-top:10px;宽度：400px；高度：150px；字体大小：0；border:1pxsolid#dcdcdc;}.example3::before{content:'';高度：100%；宽度：0；vertical-align:middle;}.example.con{width:300px;字体大小：15px；背景：#afddf3；显示：内联块；vertical-align:middle;}4、table+margin适用场景：单对象（水平居中）原理：设置子元素为块级表格，然后设置水平居中。css:.example4{margin-top:10px;宽度：400px；高度：150px；字体大小：0；border:1pxsolid#dcdcdc;}.example.con{display:table;;字体大小：15px；background:#afddf3;}5.table+table-cell+vertical-align:middle适用场景：多个对象（垂直居中）html:超级好用使用超级放心图片在线压缩压缩后可以打包下载