子元素的margin-top和padding-top都是以父元素的宽度为基准
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div class="father"><div class="son">son</div></div></body><style lang="scss">.father {width: 900px;height: 200px;border: 1px solid red;.son {margin-top: 50%;padding-top: 50%;width: 100px;height: 100px;border: 1px solid red;}}</style>
</html>