css中display:table和display:table-cell的一起使用有什么好處

這篇文章主要介紹css中display:table和display:table-cell的一起使用有什么好處，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

display的table和table-cell一般情況下用的不多，所以很少有人去關注它，但他們兩個聯手起來會給你驚喜！

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

直接上代碼：

html:

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

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就行了，多行文字垂直居中啦。是不是很直接很簡潔~

以上是“css中display:table和display:table-cell的一起使用有什么好處”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！