css 元素水平垂直居中的方法

最新推荐文章于 2024-09-07 17:40:45 发布

麻辣_水煮鱼

最新推荐文章于 2024-09-07 17:40:45 发布

阅读量112

点赞数

分类专栏： css 文章标签： CSS 元素水平居中 position margin

本文链接：https://blog.csdn.net/weixin_42217154/article/details/84958912

版权

css 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

1.父级相对定位，子级绝对定位

.parent{
    width: 500px;
    height: 500px;
    background: #f00;
    position: relative;
}
.child{
    width: 300px;
    height: 300px;
    background: #fff;
    position: absolute;
    top:50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -150px;
}

2.元素宽度未知，

如果元素未知宽度，只需将上面例子中的margin-left: -150px;margin-top:-150px;替换为：transform: translate(-50%,-50%);

.parent{
    width: 500px;
    height: 500px;
    background: #f00;
    position: relative;
}
.child{
    width: 300px;
    height: 300px;
    background: #fff;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%); 
}

3.父级相对定位，子级绝对定位+margin:auto

.parent{
    width: 500px;
    height: 500px;
    background: #f00;
    position: relative;
}
.child{
    width: 300px;
    height: 300px;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

4.flex布局

.parent{
    width: 500px;
    height: 500px;
    background: #f00;
    display: flex;
    justify-content: center;
    align-items: center
}
.child{
    width: 300px;
    height: 300px;
    background: #fff;
}

5.父级display:flex;子级margin：auto

.parent{
    width: 500px;
    height: 500px;
    background: #f00;
    display: flex;
}
.child{
    width: 300px;
    height: 300px;
    background: #fff;
    margin: auto;
}