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

Question

我有一个名为#main的页面内容的集中位置容器。它绝对定位，因为我想在容器上方留出一些空间。因此，居中使用负边距和左边：50％而不是使用边距：auto。 问题是在Chrome和Stock浏览器的Android平板电脑上，网站呈现向左移位。这应该是不可能的，因为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％不会导致剩下50％呢？

一如既往，所有的讨论和建议都表示感谢。

编辑： 更多信息，只是尝试删除绝对位置，留下50％并使用margin：auto。主要容器在左边是STILL。

Answer 1

Fiddle.

为了让某些内容成为中心，您倾向于不使用margin:auto;而是使用margin:0 auto;。

您似乎不想使用相对定位的主要原因是，您可以让#main div从顶部略微浮动。相对定位允许这很好。