css实现水平垂直居中的方法

目录

实现上图水平垂直居中有几种方法？

方法(1)通过margin属性

方法(2)通过padding属性

方法(3) “子绝父相”

 方法(4)将父元素变为弹性盒子

---

 

实现上图水平垂直居中有几种方法？

方法(1)通过margin属性

通过margin，需要给父元素设置border属性，然后给子元素设置margin为父元素宽高减去子元素宽高的一半。

 

方法(2)通过padding属性

将父元素设置为边框盒子，通过设置padding的值来挤压子元素使其水平垂直居中。

 

 

方法(3) “子绝父相”

有两种实现方法：

1、给父元素设置相对定位，给子元素设置绝对定位，通过给子元素设置top、bottom、left、right为0 margin:auto来实现。

2.给父元素设置绝对定位，子元素设置相对定位，给子元素设置top、left为50%，margin-top和margin-left为-height/2和-width/2，这里的height和width是子元素的宽高。

 方法(4)将父元素变为弹性盒子

1.将父元素设置为弹性盒子，子元素margin:auto。

2.父元素设置为弹性盒子，给父元素设置justify-content:center和align-items:center。