绝对定位的盒子不能使用margin居中
left: 50%,整个盒子移动到浏览器中间偏右的位置,top: 50%,整个盒子移动到浏览器中间偏下的位置,二者合起来就是右偏下的位置,并不是我们要的中间位置,要想在中间的话我们需要向左宽度的一半margin-left:100px,向上高度的一半margin-top:100px, transform: translate(-50%,-50%);会自动计算宽度高度的一半,不需要每次更改盒子大小都需要更改margin-left和margin-top
<style>
.box{
position: absolute;
/* left: 50%,整个盒子移动到浏览器中间偏右的位置 */
left: 50%;
/* top: 50%,整个盒子移动到浏览器中间偏下的位置 */
top: 50%;
/* 会自动计算盒子的宽度高度一半 */
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<div class="box"></div>