水平垂直居中

源自：2-8 水平居中布局的第三种解决方案优点与缺点

水平垂直居中

老师可以补充一下在不知道父子元素宽高的情况下实现水平垂直居中的方法吗

提问者：weixin_慕设计12341 2019-11-05 17:33

个回答

前端祭酒师

2020-09-07 15:16:55

.parent{
    width:500px;
    height:500px;
    position:relative;
}
.child{
    width:100px;
    height:100px;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}

0
精慕门9820064

2019-11-20 21:23:18

flex布局
.parent {
    display: flex;
    justify-content: center;
    align-items:center;
}

1
AodaZhang

2019-11-06 13:16:06

不知道宽高的情况下，就使用absolute + transform方案就可以，这种方案在项目中使用非常普遍

1