CSS的display:table-cell：多行文字的垂直居中水平居中
參考：https://blog.csdn.net/lishuai_it_trip/article/details/88411550?utm_medium=distribute.pc_relevant_t0.none-task-blog-searchFromBaidu-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-searchFromBaidu-1.control
問題：多行文本垂直居中存在問題
不可行方法：一般的思路就是高度等于行高，但是這個僅適用于單行文本，【第二行不行】
不可行方法：flex布局也只是對元素可以設置垂直居中，不作用于文本，所以是錯誤的。【對文字沒有效果】
可行的方法：display:table和display:table-cell
給父元素<div>設置display:table， 子元素<p>設置display:table-cell， 再加上一個vertical-align:middle（默認情況下，圖片，按鈕，文字和單元格都可以用vertical-align屬性）， 于是單行多行的文本垂直居中問題就解決了，不論內容有多少，不論行高是多少，總之都會整體垂直居中 <!DOCTYPE html> <html lang="cn"> <head><meta charset="UTF-8"><title>Title</title><style>div{display: table;border: 2px solid red;width: 500px;height: 200px;}p{display: table-cell;vertical-align: middle;}</style> </head> <body> <div><p>hello world <br/>hello world <br/>hello world <br/>hello world</p> </div> </body> </html>其實這就相當于模擬了table的布局屬性，display:table相當于<table>，display:table-cell就相當于<th><td>
我們不妨來看下<table>，<th>，<td>，在瀏覽器的默認屬性：
th、td父元素是<tr>，<tr>也是從父元素繼承，再往上則是tbody（table布局瀏覽器都會自動生成這個標簽），
而tbody的默認vertical-align是middle（這個我在IE和Firefox都得到了認證），
所以當我們給其他標簽加上display:table-cell時，并沒有這個屬性，
所以上文為了使文本垂直居中，需要我們手動加上vertical-align:middle。
?
?
總結
以上是生活随笔為你收集整理的CSS的display:table-cell：多行文字的垂直居中水平居中的全部內容，希望文章能夠幫你解決所遇到的問題。
