margin设置百分比是基于父容器的宽度，所以无论是margin-top还是margin-bottom都是基于父容器的宽度。
看如下示例：
<style>
.fu {
width: 400px;
height: 300px;
background: blue;
overflow: hidden;
}
.zi {
width: 20px;
height: 20px;
background: red;
margin-top: 50%;
}
</style>
<body>
<div class="fu">
<div class="zi"></div>
</div>
</body>设置margin-top: 50%;基于父容器宽度相当于margin-top: 200px;
所以代码的效果如图所示。