老师，我这么写的符合要求吗?
来源：2-10 编程练习
philLi
2019-04-17 14:11:08
<!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;
position:relative;
}
.son{
width: 100px;
height: 100px;
background: blue;
position:absolute;
margin:100px;
}
</style>
</head>
<body>
<div class="per">
<div class="son"></div>
</div>
</body>
</html>
2回答
-
你好同学，这样的方式不标准，在这里实现居中只是巧合。大盒子宽度是300px ,小盒子宽度是100px , 并且设置了margin:100px，所以当小盒子距离左右恰好各100px ,所以就居中了。
当你给大盒子宽度设置大一些 ，就能看出来小盒子并没有居中。
在如下课程中有讲过如何设置居中 ，建议同学在回顾一下课程 ，然后完善一下练习哦
https://class.imooc.com/lesson/757#mid=18880
祝学习愉快 ，望采纳。
0 -
慕沐4494624
2019-04-20
<!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;
position: relative;
}
.son{
width: 100px;
height: 100px;
background: blue;
position:absolute;
top:50%;
left:50%;
transform:translate(-50% , -50%);
}
</style>
</head>
<body>
<div class="per">
<div class="son"></div>
</div>
</body>
</html>
0
相似问题