请问为什么margin-left设置为左移25%就可以居中了？25%指的是谁的25%？

1 2	`第一步设置left：50%;是不是相当于"text"的盒子的左边向右偏移body宽度的一半，此时左边框相当于居中了。` `接下来不是应该让“text”盒子向左偏移他宽度的一半就实现了居中了，为什么是25%呢？`

qq_旧安_0 2018-11-05

源自：CSS定位（弃用） 2-9 编程练习

收起

2回答

好帮手慕查理回答被采纳获得+3积分 2018-11-06 09:51:07

您好，25%是根据整个页面的宽度来算的。注意下图，当left:50%时候，应该是处于黑色框的位置，那么当把红色区域在挪回25%的时候就居中了。你可以把整个页面分为四份，每份就相当于25%，当把红色区域挪到页面后两块的时候，把红色区域在挪回来一块，就是处于页面四份的中间两份里了，就是居中了~

400px和25%是两种方式，都是可以让红色区域居中。祝学习愉快！

收起回答

qq_旧安_0 提问者 #1

您好，这种情况我算了一下是不是只能是整个页面宽度为1600px的时候才能用啊。假设页面的宽度为2000px的话，按25%左移的话红色矩形距离左边是750px，距离右边是450px，并没有实现居中啊。

2018-11-06 10:22:11
好帮手慕查理回复提问者 qq_旧安_0 #2

您好，是的，是1600px，才能居中。如果宽度大的话，只能是一个大致居中的效果。那么我们可以将红色区域的宽度设置为50%，这样就可以实现页面的自适应了。题目中是没有要求红色区域的宽度，所以是使用的25%这个比例。祝学习愉快！

2018-11-06 10:38:31
qq_旧安_0 提问者回复好帮手慕查理 #3

哦，好的，谢谢！

2018-11-06 11:19:44

好帮手慕查理 2018-11-05 14:59:17

您好，不是很理解您描述的意思，您可以先根据下列解释理解，如果不理解请继续反馈。当设置left:50%;之后，下图红色区域就是test的样式，可以发现test整个移动了body宽度的一半。那么此时想要居中的话，我们需要在移回body一半的一半，也就是25%了。（也可以使用margin-left:-400px;让红色区域移回自已自身一半的距离）

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

祝学习愉快！

收起回答

提问者 qq_旧安_0 #1

你好，请问body的一半的一半为什么是400px呢？不是没有设置body或者“out”的宽度吗？如果是“test”的不应该是200px吗？

2018-11-05 16:19:06
好帮手慕查理回复提问者 qq_旧安_0 #2

您好，400px说的是相对于test的宽度设置的。test宽度是800px，那么再设置margin-left:-400px;就会居中显示了，根据test的宽度时是test的一半，所以是400px。body没有设置宽度所以是浏览器的宽度，test的宽度是设置的100%哦~

2018-11-05 17:04:33
提问者 qq_旧安_0 回复好帮手慕查理 #3

您好，我知道400px是根据“text”算的，但是为什么是25%呢？不是应该是50%吗？

2018-11-05 21:32:24