CSS display: table-cell 用於水平垂直居中
在 CSS 設置居中時候，水平和垂直居中的設置略有不同，通常我們使用 text-align:center 對圖片、文字等行內元素（inline / inline-block）進行水平居中，並使用 line-height 對單行文字設置垂直居中（僅適用於單行文字）。但是，如果使用表格，則可以通過 td（單元格元素）的 align="center" 及 valign="middle" 屬性設置單元格內容的水平和垂直居中。 而對於那些不是表格的元素，可以通過 display: table-cell 將其模擬成一個表格單元格 td，這樣就可以通過 CSS 的vertical-align: middle; /* 垂直居中*/ 和 text-align: center; /* 水平居中*/ 屬性進行設置。
display 值及其作用
| display 值 | 模擬 | 對應標簽 |
|---|---|---|
| table | 塊元素級的表格 | <table> |
| inline-table | 內聯元素級的表格 | <table> |
| table-caption | 表格標題 | <caption> |
| table-cell | 表格單元格 | <td> |
| table-row | 表格行 | <tr> |
| table-row-group | 表格行組 | <tbody> |
| table-column | 表格列 | <col> |
| table-column-group | 表格列組 | <colgroup> |
| table-header-group | 表格標題組 | <thead> |
| table-footer-group | 表格腳注組 | <tfoot> |
display: table-cell 實現水平垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.container{
width: 100px;
height:50px;
border: 1px solid black;
display: table-cell; /* 模擬為td單元格，同時形成了 BFC */
/*display: table-caption 如果設置為此項 則不能使用水平和垂直居中*/
vertical-align: middle; /* 垂直居中*/
text-align: center; /* 水平居中*/
margin:50px; /* table-cell 對 margin 不感知，此處設置無效*/
}
</style>
</head>
<body>
<div class="container">
a
</div>
<div class="container">
b
</div>
<div class="container">
c
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.con{
background: red;
display: table; /* 將父元素div模擬為塊級表格 table*/
margin: 50px; /* 設置父元素 table 的margin*/
}
.container{
width: 200px;
height:50px;
border: 1px solid black;
display: table-cell;
vertical-align: middle;
text-align: center;
/*margin: 50px;*/ 去掉設置無效的 margin
}
</style>
</head>
<body>
<div class="con">
<div class="container">
a
</div>
<div class="container">
b
</div>
<div class="container">
c
</div>
</div>
</body>
</html>
模擬之后，其屬性的使用，就可以將其視作一個標簽進行使用。
reference