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

?

轉載于:https://www.cnblogs.com/chen-cong/p/8076442.html

總結

以上是生活随笔為你收集整理的display:table和display:table-cell的妙用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。