关于css中display table的理解

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

---

其实display table的布局和表格是一样的，只不过可以用div显示出表格的性质。直接上代码：
html:

 

      

        

          1
        
        

          2
        
        

          3
        
      

       

        

          1
        
        

          2
        
        

          3
        
      
    

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成为一个表格
 
  
//在其内部创建一个td
      
  
//此时运用td的基础属性来设置当前的内容
        
  
          
        123
        
  
      
  
    
  

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