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

創(chuàng)新互聯(lián)自2013年起，先為北關(guān)等服務(wù)建站，北關(guān)等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為北關(guān)企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

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

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

直接上代碼：

html:

    
        會議認(rèn)為，黨的十八大以來，我國經(jīng)濟(jì)發(fā)展取得歷史性成就、
                     發(fā)生歷史性變革，為其他領(lǐng)域改革發(fā)展提供了重要物質(zhì)條件。經(jīng)濟(jì)實(shí)力
                     再上新臺階，經(jīng)濟(jì)年均增長7.1%，成為世界經(jīng)濟(jì)增長的主要?jiǎng)恿υ春头€(wěn)定器。
        

    

css:

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

看完代碼是不是瞬間明白了，這里我們只需要將容器設(shè)為display:table然他成為一個(gè)塊級表格元素，子元素display:table-cell使子元素成為表格單元格，然后就像在表格里一樣，給子元素加個(gè)vertical-align: middle就行了，多行文字垂直居中啦。是不是很直接很簡潔~

以上是“css中display:table和display:table-cell的一起使用有什么好處”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！