烦请老师检查(定位2-10编程练习)

来源:2-10 编程练习

慕码人001272

2020-03-07 19:15:13

<!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%;

   }

  </style>

</head>

<body>

  <div class="per">

    <div class="son"></div>

  </div>

</body>

</html>


写回答

1回答

好帮手慕夭夭

2020-03-07

同学你好,当设置left,top为50%之后,是元素的左上角居中。如下:

http://img.mukewang.com/climg/5e6387ae0930e81d06590515.jpg

所以想要元素的中心点居中,应该在往左和往上移动元素的一半,如下:

http://img.mukewang.com/climg/5e6387de09bc73a704280520.jpg

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 40143 问题

查看课程