<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.kuai{
width: 200px;
height: 200px;
border: red solid 1px;
position: absolute;
right: 0;
left: 0;
top:0;
bottom:0;
margin: auto;
}
.cirle2{
width: 200px;
height: 200px;
border: red solid 1px;
border-radius: 50%;
position: absolute;
top:50%;
left: 50%;
transform:translate(-50%,-50%);
margin-right: 50%;
}
</style>
</head>
<body>
<div class="kuai">
<div class="cirle2"></div>
</div>
</body>
</html>
首先指出你的问题：
一般都是子级元素用绝对定位，父级元素用相对定位。但你kuai 和 circle都用绝对定位？所以你是想以body为相对定位？？
再然后你说margin-right没有起作用，其实起作用了，你打开控制台查看元素，就会看到这个属性并没有被划掉，说明执行了。
为什么没有明显效果，是因为在kuai中你设置了它的margin：auto;且left/right/top/bottom都为0 ，也就是说在kuai的border外都是kuai的margin，circle移动不了，所以你想改变circle的位置要改变绝对定位中的right
margin-right: 50%; 是相对元素右边的移动，要用right: 50%;定位才行
.cirle2 {
width: 200px;
height: 200px;
border: red solid 1px;
border-radius: 50%;
position: absolute;
top:50%;
right: 50%;
transform:translate(50%, -50%);
margin-right: 50%;
}
margin用px单位去调整位置试试
您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~
如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～
ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632
非常感谢您使用有问必答服务，为了后续更快速的帮您解决问题，现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中，希望能得到您的支持与协助！
速戳参与调研>>>https://t.csdnimg.cn/Kf0y