display:table和display:table-cell的妙用

　　display的table和table-cell通常狀況下用的很少，因此不多有人去關注它，但他們兩個聯手起來會給你驚喜！

這裏拋出這樣一個問題，以下，讓塊裏的多行文字垂直居中？一說到垂直居中就會想到，單行文字垂直居中line-height等於height；塊級元素垂直居中，position定位或者flex佈局。但這裏我介紹display：table和table-cell是如何讓多行文字垂直居中的。雖然感受用的很少，可是在某些時候仍是挺管用的，以下

 

直接上代碼：

html:

    <div class="parent">
        <p class="son">會議認爲，黨的十八大以來，我國經濟發展取得歷史性成就、
                     發生歷史性變革，爲其餘領域改革發展提供了重要物質條件。經濟實力
                     再上新臺階，經濟年均增加7.1%，成爲世界經濟增加的主要動力源和穩定器。
        </p>
    </div>

css:

       .parent {
           display: table;
           width: 300px;
           height: 300px;
           text-align: center;
       }
       .son  {
           display: table-cell;
           height: 200px;
           background-color: yellow;
           vertical-align: middle;
       }

看完代碼是否是瞬間明白了，這裏咱們只須要將容器設爲display:table然他成爲一個塊級表格元素，子元素display:table-cell使子元素成爲表格單元格，而後就像在表格裏同樣，給子元素加個vertical-align: middle就好了,多行文字垂直居中啦。是否是很直接很簡潔~