以边距为中心的按钮在ipad中向左移动

Question

这是我的按钮：

<div id="body">
    <button>Hello</button>
</div>

及其风格：

#body{
    width:400px;
    margin:0 auto;
    background:#eee;
    border:1px solid #ccc;
}
button {
    display: block;
    margin: 0 auto;
}

它居中，但让我们在ipad中看到结果：

向左移动。

看看这个案例：http://jsfiddle.net/c2HLe/9/

请注意。 这与我之前的问题类似，但在这种情况下，我用一个简单的结构制作它，所以我认为人们可以更好地关注这个问题。

Answer 1

要使用margin: 0 auto;使按钮居中，还需要定义按钮的宽度。类似于this。

或者，您也可以使用this。

#body{
    text-align: center;
}
 button {
    display: inline-block;
}

在原始CSS中，如果容器的宽度（边距+边框+填充+内容宽度）超过1024px（iPad视口宽度），您将获得意外结果。所以一定要记住这一点。