android - 主页包装应居中但在平板电脑上显示为左侧

Question

我有一个名为#main 的页面内容居中容器。它的位置绝对是因为我想要容器上方的一些空间。因此，居中使用负边距和 left:50% 而不是使用 margin:auto。问题是在我的 Android 平板电脑上，无论是 chrome 浏览器还是股票浏览器，网站都向左移动。这应该是不可能的，因为 CSS 应该把它放在中间。

#main
{
position: absolute;
color: black;
left: 50%;
margin-left: -475px;
margin-top: 40px;
width: 950px;
height: 1600px; 
background: #6B6B6B;
border: solid 1px black;
box-shadow: 10px 10px 10px #444444;
}

有趣的是，我只是从上面删除了负左边距代码。在除我的 Android 选项卡之外的所有内容上，它都按预期呈现，容器在浏览器窗口的中间。在我的 Android 上，它紧贴着窗口的右侧。我猜如果你从这个位置执行 -475px，那会导致左偏移。但是，为什么主容器在边距移回之前不只是溢出右边缘呢？为什么 50% left 不是 50% left？

一如既往地接受所有讨论和建议。

编辑:更多信息，刚刚尝试删除绝对位置，保留 50% 并使用 margin:auto。主容器仍在左侧。

Answer 1

Fiddle.

要使某些东西居中，您往往不使用 margin:auto;，而是使用 margin:0 auto;。

另外，您似乎不想使用相对定位的主要原因是您可以让#main div 从顶部稍微 float 。相对定位可以做到这一点。