display:table-cell實現水平垂直居中
阿新 • • 發佈：2021-06-30
轉載：https://www.cnblogs.com/yangshifu/p/6954364.html
如果檢視css手冊，會發現display有許多帶table字樣的可選屬性，有table、inline-table、table-row-group、table-row、table-cell等10個之多，可以賦予div類似於<table>等標籤的佈局特性。大多數瀏覽器（IE6/7除外）對其支援良好，其實現原理參考《匿名錶格元素》。
組合使用display:table-cell和vertical-align、text-align，使父元素內的所有行內元素水平垂直居中（內部div設定display:inline-block即可）。這在子元素不確定寬高和數量時，特別實用！
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo001_displayTable</title>
<style>
/*** table-cell middle center組合使用 ***/.cell {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 240px;
height: 180px;
border:1px solid #666;
}
</style>
</head>
<body>
<divclass="cell">
<p>我愛你</p>
</div>
<divclass="cell">
<p>我愛你</p><p>親愛的中國</p>
</div>
<divclass="cell">
<p>我愛你</p><p>親愛的中國</p><divstyle="width:100px;height:50px;border:1px solid #ccc;display:inline-block">div(inline-block)</div>
</div>
</body>
</html>
|
效果：
對於只需要垂直居中的情況，可以去掉text-align:center屬性。
對table-cell元素設定百分比（如100%）的寬高值時無效的，但是可以將父元素設定display:table，再將父元素設定百分比寬高，子元素table-cell會自動撐滿父元素。這就可以做相對於整個頁面的水平垂直居中。程式碼示例如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<style>
html,body{height: 100%;margin:0;padding:0;}
/*** .table和.cell都將撐滿頁面，cell的子元素水平垂直居中 ***/
.table{
display: table;
width: 100%;
height: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
text-align: center;
border: 1px solid #666;
}
</style>
<divclass="table">
<divclass="cell">
<p>我愛你</p>
<p>親愛的中國</p>
<divstyle="width:100px;height:50px;border:1px solid #ccc;display:inline-block">div(inline-block)</div>
</div>
</div>
|
table系列的display屬性還可以實現等高佈局、靈活頁首/頁尾、水平自適應佈局等等，參考文章《css Table佈局》《display:table-cell的應用》。
特別提醒：
1.table-cell不感知margin，在父元素上設定table-row等屬性，也會使其不感知height。
2.設定float或position會對預設佈局造成破壞，可以考慮為之增加一個父div定義float等屬性。