正在回答
同学你好，代码中效果不实现是因为，如果使用的是margin-bottom：那么需要结合bottom一起使用。如果是使用margin-top，就需要结合top值 一起使用，所以代码修改如下：
祝学习愉快！
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*完善下列代码*/
.per{
width: 300px;
height: 300px;
background: red;
margin-left:200px;
margin-top: 200px;
position:relative;
}
.son{
width: 100px;
height: 100px;
background: blue;
position:absolute;
top:50%;
margin-bottom:50px;
left:50%;
margin-left:-50px;
}
</style>
</head>
<body>
<div class="per">
<div class="son"></div>
</div>
</body>
</html>
這裡這樣寫就沒有效果了
同学你好，margin-bottom也是可以实现的，可以参考下图加深理解：
（1）如果使用margin-bottom来实现垂直居中的效果，也需要结合bottom来实现，先给蓝色元素设置bottom：50%；可以看到父元素的中间线是子元素终点线：
（2）根据上面的图可以看到，子元素并没有相对于父元素垂直居中显示，所以需要将子元素向下移动自己高度的一半，但是给子元素设置bottom值时，子元素的终点线是父元素的中心点，那么就需要向下移动自身高度的一半，从终点线向下移动一半，就需要是-50px，所以需要设置margin-bottom：-50px；
祝学习愉快！
同学你好，margin-top：50px；跟margin-top：-50px；不是一个意思，可以参考下图来加深理解，如下：
（1）想要蓝色的子元素相对于红色的父元素实现垂直居中定位，需要给蓝色子元素设置top：50%，这样蓝色子元素上面的起点位置就是红色父元素的中心位置，如下：
（2）根据上图可以看到，子元素并没有相对于父元素垂直居中显示，所以需要将子元素再向上移动自己高度的一半，刚才给子元素设置top值时，子元素的起点是父元素的中心，那么子元素再向上移动自身高度的一半，那么就是margin-top：-50px；如果是margin-top：50px的话，就相当于子元素根据自身的起点向下移动的，是不能实现垂直居中的效果。
实现效果：
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星