关于css中display table的理解

最近空闲时间研究了一下css。
本文讲解css中display table的布局方式。

---

其实display table的布局和表格是一样的，只不过可以用div显示出表格的性质。直接上代码：
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

---

那么，网上说也可以使用其布局让组件垂直居中。
html:

//首先让div成为一个表格
 <div class="is-Table">  
//在其内部创建一个td
      <div class="Table-Cell">  
//此时运用td的基础属性来设置当前的内容
        <div class="Center-Block">  
        <!-- CONTENT -->  
        123
        </div>  
      </div>  
    </div>  

css:

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

若需要了解其他居中方式，可以跳转至此博客。

总结：

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样式渲染