利用flex实现元素水平垂直居中

最新推荐文章于 2024-10-11 15:13:15 发布

辣条小哥哥

最新推荐文章于 2024-10-11 15:13:15 发布

阅读量668

点赞数

分类专栏： CSS3 文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_44090040/article/details/120528358

版权

CSS3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<div class="father">
    <div class="son">
    </div>
</div>

*{
    margin: 0;
    padding: 0
}
.father{
    width: 400px;
    height: 400px;
    border: 1px dashed black;
    display: flex;/*父元素设置flex属性*/
    justify-content: center;/*水平主轴居中*/
    align-items: center;/*垂直交叉轴居中*/
}
.son{
    width: 100px;
    height: 50px;
    background: pink;
}