最近空閑時(shí)間研究了一下css。
本文講解css中display table的布局方式。

其實(shí)display table的布局和表格是一樣的，只不過可以用div顯示出表格的性質(zhì)。直接上代碼：
html:

 <div class="tablecss">
      <div class="tabletr">
        <div class="tabletd">
          1
        </div>
        <div class="tabletd">
          2
        </div>
        <div class="tabletd">
          3
        </div>
      </div>

       <div class="tabletr">
        <div class="tabletd">
          1
        </div>
        <div class="tabletd">
          2
        </div>
        <div class="tabletd">
          3
        </div>
      </div>
    </div>

css:

.tablecss {
        margin-top: 200px;
        width: 100%;
        height: 200px;
        background-color: blue;
        display: table;
    }

    .tabletr {
        display: table-row;
        background-color: red;
    }

    .tabletd{
        display: table-cell;
        background-color: orange;
        border: 1px solid;
    }

效果圖為：

效果圖.png

那么，網(wǎng)上說也可以使用其布局讓組件垂直居中。
html:

//首先讓div成為一個(gè)表格
 <div class="is-Table">  
//在其內(nèi)部創(chuàng)建一個(gè)td
      <div class="Table-Cell">  
//此時(shí)運(yùn)用td的基礎(chǔ)屬性來設(shè)置當(dāng)前的內(nèi)容
        <div class="Center-Block">  
        <!-- CONTENT -->  
        123
        </div>  
      </div>  
    </div>  

css:

//設(shè)置表格
  .is-Table { 
        width: 100%;
        height: 200px;
        display: table; 
        background-color: red;
    }  
//設(shè)置td 并且其中內(nèi)容垂直居中
    .Table-Cell {  
      display: table-cell;  
      vertical-align: middle;  
      background-color: blue;
    }  
//設(shè)置td里面的內(nèi)容，并且水平居中
     .Center-Block {  
      width: 50%;  
      height: 100px;
      margin: 0 auto;  
      background-color: red;
      text-align: center;
    }  

若需要了解其他居中方式，可以跳轉(zhuǎn)至此博客。

總結(jié)：

table
    使該元素按table樣式渲染
table-row
    使該元素按tr樣式渲染
table-cell
    使該元素按td樣式渲染
table-row-group
    使該元素按tbody樣式渲染
table-header-group
    使該元素按thead樣式渲染
table-footer-group
    使該元素按tfoot樣式渲染
table-caption
    使該元素按caption樣式渲染
table-column
    使該元素按col樣式渲染
table-column-group
    使該元素按colgroup樣式渲染