到底该怎么居中？？

我电脑的分辨率为1920，能不能给个参考答案

雨之赞歌 2018-12-28

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

收起

2回答

好帮手慕查理回答被采纳获得+3积分 2018-12-28 15:49:03

您好，红色的div设置之后，向右移动50%，那么此时红色的div应该是最左边的边处于页面居中的位置，那么在往回挪红色div的一半，那么就是呈现红色div中间部分处于页面中间部分，那么也就实现了红色div的居中。这也就是margin-left：-400px的原因。参考代码如下：

<!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;
     top:0;
     left:50%;
     margin-left:-400px;
   }
   .out{
      width: 100%;
      height: 2000px;
      background-color: #abcdef;
    }
</style>
</head>
<body>
  <div class="out">
    <div class="test"></div>
  </div>
</body>
</html>

如果解决了您的问题，请采纳。祝学习愉快！

收起回答

雨之赞歌提问者 #1

可是为什么margin-left可以设置负值呢？为什么能达到偏移的效果

2018-12-28 15:58:34
好帮手慕查理回复提问者雨之赞歌 #2

您好，margin-left可以设置正值，也可以设置负值。就好比有一个需要走2000步的台阶，而你自身的长度占800个台阶，那么走到50%一半的时候，就相当于头部站在最中间的台阶，但是你的脚已经到达了1800个台阶的位置了，那么此时就不是居中了，那么我在倒着走400个台阶（margin-left就相当于这倒着走的400个台阶），那么整个人也就处于台阶的中间了。祝学习愉快！

2018-12-28 17:18:55