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>
        </p><p>会议认为，党的十八大以来，我国经济发展取得历史性成就、
                     发生历史性变革，为其他领域改革发展提供了重要物质条件。经济实力
                     再上新台阶，经济年均增长7.1%，成为世界经济增长的主要动力源和稳定器。
        </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的合用的妙處的詳細內容。更多資訊請關注PHP中文網其他相關文章！