CSS实现垂直居中的方法

1、relative+absolute定位:

(1)css+html代码



    
        
        Document
        
    

    
        
父元素
子元素

(2)效果


Paste_Image.png

(3)兼容性:兼容全部浏览器

2、flex布局:

(1)html+css代码




    
        
        Document
        
    

    
        
子元素

(2)效果


Paste_Image.png

(3)兼容性

Paste_Image.png

3、relative+transform定位:

(1)html+css代码




    
        
        Document
        
    

    
        
子元素

(2)效果


Paste_Image.png

(3)兼容性


Paste_Image.png

总结:

根据项目浏览器兼容性要求,选择合适的垂直居中的方案。方案2和方案3适合用在移动端项目,方案1兼容性方面最好。

作者:王翔 QQ:592767079 Email:wangxianglengye.com 期待共同进步!

你可能感兴趣的:(CSS实现垂直居中的方法)