垂直水平居中的四种方式

最新推荐文章于 2024-04-17 07:16:01 发布

Ivana_zyf

最新推荐文章于 2024-04-17 07:16:01 发布

阅读量297

点赞数

分类专栏：布局文章标签：水平垂直居中

本文链接：https://blog.csdn.net/Ivana_zyf/article/details/79382639

版权

布局专栏收录该内容

3 篇文章 0 订阅

订阅专栏

.parent{
height: 500px;
background: skyblue;
width: 500px;
}
.child{
width: 100px;
height: 100px;
background: #333;
}

已知元素高度

.parent{
position: relative;
}
.child{
position: absolute;
left:50%;
margin-left: -50px;
top:50%;
margin-top: -50px;
}

元素高度未知

①绝对定位+margin：auto

   .parent{
        position: relative;
    }
    .child{
        position: absolute;
        left: 0;
        right: 0;
        top:0;
        bottom: 0;
        margin: auto;
    }

②弹性盒子

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

③div模拟表格盒子

   .parent{
        /*display: table;*/
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    .child{
        display: inline-block;
    }

④CSS3实现

   .parent{
        position: relative;
    }
    .child{
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%);//相对于该元素本身
    }