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-cell 实现水平垂直居中

            
                                    
    
                 a        
    
        
    
                 b        
    
        
    
                 c        
    
    

display: table-cell

            
                                    
    
            
     
                  a            
     
            
     
                      b            
     
            
     
                      c            
     
        
    
            

外层div模拟为table，设置出margin

子元素table-cell自动撑满父元素table

模拟之后，其属性的使用，就可以将其视作一个标签进行使用。

reference