盒子水平垂直居中常用的六种方法

在写前端代码的时候,我们经常用到盒子的水平垂直居中,这里说的水平垂直居中都要有一个参照物,也就是子盒子相对于父盒子的水平垂直居中,

效果展示:

盒子水平垂直居中常用的六种方法_第1张图片

 

方法一:利用定位

父盒子使用相对定位,子盒子使用绝对定位,利用top:50% left:50% 让子盒子相距父盒子上边界,左边界宽高的50% 利用 margin-top margin-left返回子盒子自身宽高的50%





    
    
    
    Document

    


    
我是父元素        
我是子元素
   

方法二:利用margin:auto

有时候,要实现一些元素水平垂直都居中,这部分元素呢,可能大小未知,例如一些图片或者一些未知大小的块元素,margin:auto会自动去计算子元素和父元素之间的边距,并设为居中。所以就会实现上下左右都居中。

那么还有一个问题,既然居中是有margin:auto来计算实现。为什么还需要将元素设为绝对定位呢?

这是因为margin:auto 默认只会计算左右边距。而上下如果设置为auto时默认是取0.也就是说,margin:auto和margin:0 auto 在一般情况下没有区别,不能实现垂直居中。

但是有了绝对定位后,margin-top和margin-bottom 的值就不是0了,也是通过计算所得。所以能实现垂直居中





    
    
    
    Document
    


    
我是父元素        
我是子元素
   

方法三:利用display:table-cell





    
    
    
    Document
    



    
我是父元素        
我是子元素
   

方法四:利用display:flex

flex布局设置主轴从轴居中

 





    
    
    
    Document
    



    
       
我是子元素
   

方法五:计算父盒子与子盒子的空间距离(这跟方法一是一个道理)

记得给盒子添加边框,防止产生外边距塌陷的问题




    
    
    
    Document
    



    
       
我是子元素
   

方法六: 利用transform(变换)实现居中

这个方法与方法一类似,也是使用子绝夫相,先是让子盒子在父盒子的上和左50%再返回自身宽高的50%,从而来实现居中,在translate中的百分比是相较与自身宽高来计算的,





    
    
    
    Document
    



    
       
我是子元素
   

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