css 垂直居中

1. line-height :單行文字垂直居中
　　適用於 按鈕 下拉框 導航  原理是將單行文字的行高設定後,文字會位於行高的垂直中間位置.css

2.line-height + inline-block 多對象多個元素或多行元素的垂直居中
　　將多個元素或多行元素當成一個行元素來看待,須要將這些數據多包一層,並將其設定爲inline-block, 並在該inline-block對象的外層使用inline-block來代替height的設置,
　　spa

<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達到垂直居中code