Q:你知道如何用line-height使多行文字垂直居中麼？

咱們先看運行效果：

知識點

1. line-height（行高） : 指的是兩行文字間基線之間的距離，而實際撐開div高度的不是height，而是line-height。
2. **line box **: 每一行稱爲一條line box，它又是由這一行的許多inline box組成，它的高度能夠直接由最大的line-height決定。不少條line box的高度垂直堆疊造成咱們見到的div或是p標籤之類的父元素高度了。不管line box所佔據的高度是多少，其佔據的空間都是與文字內容公用水平中垂線的。它的垂直居中的性質能夠用來實現文字或圖片的垂直居中對齊。
3. **行間距 - 行內框高度 **：

   

   行間距是font-size與line-height的差值，被分紅兩半在內容區的上下 行內框高度（替換元素）=內容區寬度 行內框高度（非替換元素）=line-height 瞭解更多替換元素非替換元素的區別點這

一行文字垂直居中

根據知識點3，如今可理解只設置行高後，內容區上下方自動填充行間距，使得文字垂直居中。

<p class="single_line">這是一行文字這是一行文字這是一行文字</p>
複製代碼

.single_line{
  line-height:150px; border:1px dashed #cccccc; padding-left:5px;font-size:12px;
}
複製代碼

多行文字垂直居中

要實現高度不固定的文字垂直居中使用padding就行了。對於高度固定的div，裏面文字單行或多行顯示，字體有大有小怎麼辦呢？能夠藉助於line-height。

<p class="mulit_line">
    <span style="font-size:12px;">這裏是高度爲150px的標籤內的多行文字，文字大小爲12像素。
        <br>這裏是第二行，用來測試多行的顯示效果。
    </span>
    <i>&nbsp;</i>
</p>
複製代碼

inline-block屬性使得外面包了一層line box。根據知識點2以及內聯元素默認基線對齊，給span和i都設置爲vertical-align:middle便可。實際應用中可將i的width設爲0，案例中1px爲了幫助理解用。

.mulit_line{ 
    border:1px dashed #cccccc; 
    padding-left:5px;
}
.mulit_line span{ 
    display:inline-block; 
    vertical-align:middle;
}
.mulit_line i{
    width:1px; 
    display:inline-block;
    vertical-align:middle; 
    font-size:0;
    background:red;
    line-height:150px;
}

複製代碼

看完整代碼點這

更多內容歡迎互相交流一下。