? 垂直居中是一個老話題没酣，我總結(jié)一下我所遇到的垂直居中方法轨功，歡迎大家更正補充牢酵。
單行文本
? 相信大家對單行文本垂直居中并不陌生，讓height等于line-height就可以谊却，示例如下：
<p class="one_line">這里是高度為150像素的標(biāo)簽內(nèi)的單行文字柔昼。</p>
.one_line{width:300px;height:150px;line-height:150px;text-align:center;font-size:12px;border:1px dashed#cccccc;color:#5588aa;}
多行文本
1.基于vertical-align的方法
<div class="multi_line_1">
? ?<p>這里是高度為150像素的標(biāo)簽內(nèi)的多行文字，文字大小為12像素炎辨。這里是第二行捕透，用來測試多行的顯示效果。</p>
</div>
.multi_line_1{line-height:150px;}
.multi_line_1>p{display: inline-block; line-height: 1.4em; vertical-align: middle; background: #5588aa; margin-top:0;font-size: 12px;}
2.基于table-cell的方法
? 其html代碼參考“基于vertical-align的方法”碴萧，代碼渲染結(jié)果同圖2乙嘀。
.multi_line_3{height:150px;display:table-cell;vertical-align:middle;}
.multi_line_3>p{background:#5588aa;}
3.基于calc()函數(shù)
? ?calc()函數(shù)的出現(xiàn)，使我們可以在css中能動態(tài)計算長度值破喻。其html代碼參考“基于vertical-align的方法”虎谢，代碼渲染結(jié)果同圖2。
.multi_line_5{height:150px;position:relative;}
.multi_line_5>p{width:250px;height:70px;position:absolute;background:#5588aa;margin:0;top:calc(50% -35px);left:calc(50% -125px);font-size: 12px;}
瀏覽器對calc()函數(shù)的支持情況如下：
使用calc()函數(shù)時要注意曹质，函數(shù)內(nèi)部的-和+運算符的兩側(cè)各加一個空白符婴噩，否則會產(chǎn)生解析錯誤！這個規(guī)則如此怪異羽德，是為了向前兼容：未來几莽，在calc()函數(shù)內(nèi)部可能會允許使用關(guān)鍵字，而這些關(guān)鍵字可能會包含連字符宅静。
4.基于translate()
? ?當(dāng)我們使用絕對定位并將top設(shè)置為50%章蚣，此時待居中元素頂端距離父元素頂端的距離為父元素高度的一半，如果能將帶居中元素向上移動自身高度的一半姨夹，則實現(xiàn)了垂直居中纤垂。隨著css3的出現(xiàn)，使其變?yōu)榭赡芰渍耍?dāng)我們在translate()變形函數(shù)中使用百分比時峭沦，是以這個元素自身的高度和寬度進行計算和移動的。其html代碼參考“基于vertical-align的方法”够颠，主要代碼如下：
.multi_line_4{height:150px;position:relative;}
.multi_line_4>p{background:#5588aa;position:absolute;margin-top:0; transform: translate(-50%,-50%); top:50%;left:50%;}
5.基于flex布局的方法
? Flex布局為彈性布局熙侍，可以簡便榄鉴、完整履磨、響應(yīng)式地實現(xiàn)各種頁面布局。目前庆尘，它已經(jīng)得到了所有瀏覽器的支持剃诅。有關(guān)flex布局的講解請參考這里。瀏覽器對flex布局的支持情況如下：
? ?當(dāng)我們使用flex布局時驶忌，margin:auto不僅水平方向上將元素居中矛辕，垂直方向上也是笑跛。我們需要做的非常簡單，將待居中元素的父元素設(shè)置為flex布局聊品，即display:flex飞蹂，然后再將待居中元素的margin設(shè)為auto，代碼渲染結(jié)果同圖2翻屈。
.multi_line_2{display:flex;height:150px;}
.multi_line_2>p{background:#5588aa;margin:auto;}
? Flex布局的另一個好處是陈哑，它可以將匿名容器（即未被標(biāo)簽包裹的文本節(jié)點）垂直居中。
<div class="multi_line_6">這里是高度為150像素的標(biāo)簽內(nèi)的多行文字伸眶，文字大小為12像素惊窖。這里是第二行，用來測試多行的顯示效果厘贼。</div>
.multi_line_6{display:flex;height:150px;align-items:center;}
