css水平和垂直居中的几种实现方式

最新推荐文章于 2023-09-30 13:11:25 发布

桃子Jerry

最新推荐文章于 2023-09-30 13:11:25 发布

阅读量180

点赞数

分类专栏： css 前端 html

本文链接：https://blog.csdn.net/jerryjjyy/article/details/104427396

版权

前端同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

方法一，flex布局：

#box {
    width: 600px;
    height: 500px;
    border: red solid 3px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#content{
    width:300px;
    height:200px;
    background: red;
}

方法二，position布局：

#box {
    width: 600px;
    height: 500px;
    border: red solid 3px;
    position: relative;
}
#content{
    width:300px;
    height:200px;
    background: red;
    margin:auto auto;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

方法三，计算子元素margin值居中：

#box {
    width: 600px;
    height: 500px;
    border: red solid 3px;
    position: relative;
}
#content{
    width:300px;
    height:200px;
    background: red;
    position: absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -150px;
}

方法四，transform布局：

#box {
    width: 600px;
    height: 500px;
    border: red solid 3px;
    position: relative;
}
#content{
    width:300px;
    height:200px;
    background: red;
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

完。