css垂直水平居中常用的几种方法

最新推荐文章于 2024-09-14 22:46:39 发布

今晚早·睡

最新推荐文章于 2024-09-14 22:46:39 发布

阅读量136

点赞数

文章标签： css html flex

本文链接：https://blog.csdn.net/weixin_44642057/article/details/112253191

版权

1.绝对定位+margin

        .box1 {
            position: relative;
            width: 1200px;
            height: 600px;
            background-color: red;
        }

        .box2 {
            position: absolute;
            top:0;
            right:0;
            bottom:0;
            left:0;
            margin: auto;
            width: 600px;
            height: 300px;
            background-color: blue;
        }

2.绝对定位+偏移量

  .box1 {
            position: relative;
            width: 1200px;
            height: 600px;
            background-color: red;
        }
        .box2 {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50% ,-50%);
            width: 600px;
            height: 300px;
            background-color: blue;
        }

3.绝对定位加外边距

 .box1 {
            position: relative;
            width: 1200px;
            height: 600px;
            background-color: red;
        }
        .box2 {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -300px;
            margin-top: -150px;
            width: 600px;
            height: 300px;
            background-color: blue;
        }

4.flex布局

.box1 {
            width: 1200px;
            height: 600px;
            background-color: red;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .box2 {
            width: 600px;
            height: 300px;
            background-color: blue;
        }