1. line-height :单行文字垂直居中
适用于 按钮 下拉框 导航 原理是将单行文字的行高设定后,文字会位于行高的垂直中间位置.
2.line-height + inline-block 多对象多个元素或多行元素的垂直居中
将多个元素或多行元素当成一个行元素来看待,需要将这些数据多包一层,并将其设定为inline-block, 并在该inline-block对象的外层使用inline-block来代替height的设置,
<style>
.box{ ??????width:500px; ??????border:1px solid #f00; ??????margin:auto; ??????line-height:200px; ??????text-align:center;}.box .content{ ??????display:inline-block; ??????height:auto; ??????line-height:1; ??????width:400px; ??????background:#ccc;}</style><div class="box "> ???<div class="content"> ??????aaaaaaaaaa<a href="">bbbbbbbbbbbbbb</a> ??????cccccccccccccccccc ???</div></div>
3.:befor + inline-block 多对象的css垂直居中
:before伪类元素+inline-block 属性的写法好处在于子元素居中可以不需要特别设定高度,将:before伪类元素设定为100%高的inline-block,再搭配上将需要剧中的子元素同样设置成inline-block性质,就能使用vertical-align:minddle达到垂直居中
css 垂直居中
原文地址：https://www.cnblogs.com/moli-/p/9531273.html