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

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

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

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

直接上代碼：

html:

    <p class="parent">
        <p class="son">會議認(rèn)為，黨的十八大以來，我國經(jīng)濟(jì)發(fā)展取得歷史性成就、
                     發(fā)生歷史性變革，為其他領(lǐng)域改革發(fā)展提供了重要物質(zhì)條件。經(jīng)濟(jì)實(shí)力
                     再上新臺階，經(jīng)濟(jì)年均增長7.1%，成為世界經(jīng)濟(jì)增長的主要動力源和穩(wěn)定器。
        </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;
       }

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

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