<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
box-sizing: border-box;
}
.box {
position: relative;
width: 500px;
height: 500px;
background-color: aqua;
}
.minBox {
position: absolute;
left: 50%;
top: 50%;
width: 250px;
height: 250px;
/*margin-left: -125px;*/
/*margin-top: -125px;*/
border: 2px solid red;
}
</style>
</head>
<body>
<div class="box">
<div class="minBox"></div>
</div>
</body>
</html>当.minbox设置margin-left: -125px;margin-top: -125px;minbox就居中了，为什么？margin不是外边距吗？
首先你要理解，margin-left: 125px 时，元素相对原始位置向右移动125px，如果值是负数-125px的话，就会向左边移动。
.minBox {left: 50%; top: 50%;} 将minBox的左上角移动到外部容器 box 的中心点，如图
这时候你会怎样做来让minBox居中？当然是让minBox的中心点和 box的中心点重合，如图
很简单的数学问题
子元素设置 position:absolute ，因为父元素的 position:relative ，所以子元素会相对于父元素定位，left 的值是 50%，这个 50% 是相对父元素的宽度，即 250px，所以没有设置 margin 之前子元素的左上角距离父元素的顶部和左边是 250px ,所以如图1，但是设置 margin-left:-125px 和 margin-top:-125px 之后，左上角距离父元素的顶部和左部的距离就变成 125px，刚好居中，如图2.
更多关于负边距的使用，可以参考 负边距