关于div水平居中的问题

老师，我想请问一下，这个编程练习中，说要把红色div块放到页面，水平居中显示，这里面的方法是可行的。但是怎么做啊？先左边空出50%，然后又左移div块宽度的一半，这两者不会相互矛盾么？

另外，除此之外，我还想知道，还有什么方法能让一个div水平方向居中么？因为不同电脑不同浏览器，页面宽度是不一样的，怎么编写代码能保证在其他平台都能做到水平方向居中呢？

哆丶哆 2019-07-06

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

收起

2回答

好帮手慕阿满回答被采纳获得+3积分 2019-07-06 17:34:38

同学你好，同学可以参考如下代码：

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

先设置定位position:fixed;然后设置left：50%;再将div块左移一半400px，margin-left:-400px;

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

收起回答

好帮手慕阿满 2019-07-06 15:08:05

同学你好，设置左边50%，然后又左移div块宽度的一半并不矛盾。另外同学可以在设置时，使用百分比来设置，使其自适应屏幕，这样就可以在任何浏览器上都能居中显示。

同学可以自己写代码尝试一下。

祝：学习愉快~

收起回答