CSS 水平垂直居中的方式

目录

在不知道子元素宽高的情况下，水平垂直居中的六种方式：

1、弹性盒子布局方式来实现（flex）。

 2、绝对定位 + transform

3、table标签

4、display：table-cell

5、display: grid

6、writing-mode 属性

---

在不知道子元素宽高的情况下，水平垂直居中的六种方式：

在实际使用最好测试下最低版本是否支持对应的实现方式，尽量选各个浏览器支持比较好的，或者最常见的实现方式。

1、弹性盒子布局方式来实现（flex）。

    
    
    
    




    

        

            中间盒子水平垂直居中了
        
    

浏览器兼容性：

 2、绝对定位 + transform

    
    
    
    




    

        

            中间盒子水平垂直居中了
        
    

浏览器兼容性：

 

3、table标签

    
    
    
    




    

        

            

                

                    
中间盒子水平垂直居中了
                
            
        
    

兼容性：基本都支持，只是书写起来比较繁琐，多层嵌套。

4、display：table-cell

    
    
    
    




    

        
中间盒子水平垂直居中了
    

浏览器兼容性：主流浏览器基本上都支持的。

5、display: grid

    
    
    
    




    

        
123123
    

浏览器兼容性：最新主流浏览器基本上兼容，对于老版本浏览器可能会有兼容性问题。

6、writing-mode 属性

    
    
    
    




    

        

            
123123
        
    

浏览器兼容性问题：