麻烦老师检查一下，这么写符合要求吗？
来源：2-10 编程练习
philLi
2019-04-21 16:04:24
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*完善下列代码*/
.per{
width: 500px;
height: 500px;
background: red;
margin-left:200px;
margin-top: 200px;
position:relative;
}
.son{
width: 100px;
height: 100px;
background: blue;
position:absolute;
margin-left:50%;
margin-top:50%;
left:-50px;
top:-50px;
}
</style>
</head>
<body>
<div class="per">
<div class="son"></div>
</div>
</body>
</html>
1回答
-
你好同学，虽然也实现了居中，但是属性值设置的不太好，设置居中的原理：
元素先设置top ,left值为50% ,然后它的左上角会水平垂直居中。 此时需要往上和往左移动元素宽高的一半 ,这样能够让元素中心点居中 .即需要设置margin-left值为图片宽度一半(负值) , margin-top:
值为图片高度的一半(负值)。
代码如下修改：
两种方式虽然实现的效果一样，但是这样更标准哦。
祝学习愉快 ，望采纳。
0
相似问题