网页中移动盒子的情况整理_小盒子怎么调整位置网页-CSDN博客

本文链接：https://blog.csdn.net/weixin_54719957/article/details/114543921

NO.1 通过定位来解决**
话不多说上代码

1.body样式

<body>
    <div class="p">
        <div class="c"></div>
    </div>
</body>

2.style样式

.p {
    position: relative;
    height: 500px;
    width: 800px;
    background-color: purple;
    margin-top: 100px;
    margin: auto;
}

.p .c {
    position: absolute;
    top: 200px;
    left: 350px;
    height: 100px;
    width: 100px;
    background-color: black;
}

这种方式缺陷在于不灵活，完全是根据大盒子的长宽进行计算，修改比较麻烦。

NO.2 如果对于这种方案的一种增添，我们还可以用外边距(margin)来改变盒子的位置。
这也是一种方法可以单单作为一类，也可以作为另外一种方法。

未居中的代码······
仅仅改动样式

.p .c {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100px;
    width: 100px;
    background-color: black;
}

在这里插入图片描述

通过外边距加工后居中的代码
其中的margin移动长度作为小盒子长宽的一半，通过简单的计算。
上代码！
仅仅改动样式

.p .c {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100px;
    width: 100px;
    margin-top: -50px;
    margin-left: -50px;
    background-color: black;
}

在这里插入图片描述

NO.3 通过transition属性解决
先上代码！
仅仅改动样式

.p .c {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100px;
    width: 100px;
    transform: translate(-50%, -50%);
    background-color: black;
}