请问这个居中是以什么数据作为参照来确认的？

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding:0;
    }
    .test{
     width: 400px;
     height: 100px;
     background: red;
     /*此处写代码*/
    position:fixed;
/*    left:0;
    right:0;
    margin: auto;*/
    left:280px; 
    /*margin-left:-170px;*/
   }
   .out{
    width: 100%;
    height: 2000px;
    background-color: #abcdef;
  }
</style>
</head>
<body>
  <div class="out">
    <div class="test"></div>
  </div>
</body>
</html>

父div宽度960px。

子div宽度400px，并且外边距都是0px了，这样设置left:280px仍然不居中，请问时什么原因？是数值意义理解错了吗？就算在代码区加上box-sizing:border-box;，效果仍然没有变化。

firman 2019-12-11

源自：CSS定位 6-3 编程练习

收起

1回答

好帮手慕小班回答被采纳获得+3积分 2019-12-11 15:50:13

同学你好，题目中所说的居中是以当前浏览器窗口来说的居中。

同学可以直接设置left、right把元素充满容器(浏览器)，margin：0,auto; 0表示上下边距，auto表示左右边距，auto是自动调整大小，默认为左右边距相同，调整为居中展示。

也可以通过定位先向右移动50%的距离，div的左边缘就相对于窗口居中了，然后我们需要将它“拽回来”一些，这样它就水平居中了

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

收起回答

firman 提问者 #1

老师，浏览器的宽度是以哪个元素为准的？是html吗？还是body？

2019-12-11 20:39:32
好帮手慕小班回复提问者 firman #2

同学你好，浏览器的宽度是以当前电脑的分辨率为标准的(全屏状态下的浏览器)，而html与body是一样的宽度，它们默认状态下的宽度就是浏览器的宽度(浏览器宽度的100%)。如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

2019-12-12 09:54:42