极客观点
项目管理
HarmonyOS
<!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不是外边距吗？
子元素设置
position:absolute，因为父元素的position:relative，所以子元素会相对于父元素定位，left的值是50%，这个50%是相对父元素的宽度，即250px，所以没有设置margin之前子元素的左上角距离父元素的顶部和左边是250px,所以如图1，但是设置margin-left:-125px和margin-top:-125px之后，左上角距离父元素的顶部和左部的距离就变成125px，刚好居中，如图2.更多关于负边距的使用，可以参考 负边距