老师，这样为什么也可以
我同事说这是父级拖拽，我没搞懂，也能实现这个，这个overflow是干啥用的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*完善下列代码*/
.per{
width: 300px;
height: 300px;
background: red;
margin-left:200px;
margin-top: 200px;
overflow: hidden;
}
.son{
width: 100px;
height: 100px;
background: blue;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="per">
<div class="son"></div>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
你好同学，margin:0 auto是可以实现一个盒子在父容器中水平居中的。代码中设置了 margin: 100px auto;可以实现水平居中。
并且上下间距设置为100px，因为父容器高度为300px,子元素高度100px，这样子元素高度加上下间距恰好是父元素高度，也就实现了垂直居中哦，参考如下理解
代码很灵活，实现居中的方式不是唯一的。不过这个方法不推荐使用，例如父容器高度变大了，那么上下间距就要重新计算，否则盒子就没办法居中，如下：
上节课程中有讲解过居中的方式，建议同学复习一下课程，按照课程中的方式进行练习。
overflow: hidden;在这里可以清除间距重叠的现象，这样防止子元素设置间距会父元素会跟着跑下去。祝学习愉快，望采纳。
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星