如何理解子元素在绝对定位时如果同时设置width为100%和left值，手机浏览器不能够居中。

Question

话不多说，看代码

  <style>
    .contain{margin:0 auto;width:960px;height: 500px;background: red;position: relative;}
    .x1{width:100%;height:40px;position: absolute;left:180px;background: blue;}
  </style>

  <div class="contain">
        <div class="x1">
        </div>
  </div>

上述代码在电脑浏览器中红色块段是可以水平居中的
如图

但是

在手机上红色红色块段就不能水平居中了
看截屏

这如何解释？
谢谢

Answer 1

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

在head里面加上这句话.另外，想要移动端适应，宽度就要作处理，或者流式布局，或者媒体查询设置宽度。

建议html，css多看一些博客书籍，别以为这些东西很简单，遇到的坑不比js少

Answer 2

谢邀！
你想要这种效果？
demo