CSS实现块级元素水平垂直居中

块级元素水平垂直居中一直是常考面试体,工作中也经常会用到,在这里就汇总使用css实现块级元素水平垂直居中的方法.欢迎补充.

方法一: 父级元素position:relative, 子元素position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;





    
    
    
    元素水平垂直居中
    



    

方法二:父级元素position:relative, 子元素position:absolute;top:50%;left:50%;margin-left:-(子元素宽度的一半);margin-top:-(子元素高度的一半).





    
    
    
    元素水平垂直居中
    



    

方法三:使用transform:translate(-50%, -50%);





    
    
    
    元素水平垂直居中
    



    

方法四: 使用flex布局 align-items: center;





    
    
    
    元素水平垂直居中
    



    

方法五: 使用flex布局 flex-direction: column;align-self: center;



 

    
    
    
    元素水平垂直居中
    

 

    

方法六: display:table



 

    
    
    
    元素水平垂直居中
    

 

    

欢迎补充!

你可能感兴趣的:(CSS,前端)