烦请老师检查(定位2-14编程练习)另有一问题

来源:2-14 编程练习

慕码人001272

2020-03-07 19:33:25

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    *{

      margin: 0;

      padding:0;

    }

    .test{

     width: 800px;

     height: 100px;

     background: red;

     position:fixed;

     right:50%;

     left:50%;

     

   

   }

   .out{

    width: 100%;

    height: 2000px;

    background-color: #abcdef;

  }

</style>

</head>

<body>

  <div class="out">

    <div class="test"></div> 

  </div> 

</body>

</html>

--------------------------------------------

为什么无法居中显示?已设置了left,right各50%

写回答

1回答

好帮手慕星星

2020-03-07

同学你好,设置left,right各50%并不能实现居中显示。设置left为50%,是元素的左上角在50%的位置,如果想要元素的中心点在50%的位置,需要向左移动元素的一半:

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

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

0

0 学习 · 40143 问题

查看课程