CSS复习之div的水平垂直居中

最新推荐文章于 2022-04-26 11:49:49 发布

Hello_HBL

最新推荐文章于 2022-04-26 11:49:49 发布

阅读量112

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_35436954/article/details/90168018

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

如果一个div不定宽高，如何在父元素中水平和垂直居中？

方法一：绝对定位和css3方法

#fa{
    width: 500px;
    height: 500px;
    background: forestgreen;
    position: relative;
}

#son{
    width: 200px;
    height: 250px;
    background: fuchsia;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

方法二：flex方法

#fa{
    width: 500px;
    height: 500px;
    background: forestgreen;
    display: flex;
    justify-content: center;
    align-items: center;
}

#son{
    width: 200px;
    height: 250px;
    background: fuchsia;
}