使用自动边距在 body 或 div 元素上居中答案

【问题标题】：Using automatic margin for centering on a body or div element使用自动边距在 body 或 div 元素上居中
【发布时间】：2013-11-09 08:25:03
【问题描述】：

我使用margin: 0 auto; 将我的页面内容居中。最近我发现在body 上使用自动边距与在（包装器）div 上使用自动边距具有相同的视觉效果。

<!DOCTYPE>
<html>
<head>
    <style>
        div#wrapper {
            margin: 0 auto;
            width: 60%;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <!-- Rest of page. -->
    </div>
</body>
</html>

相比;

<!DOCTYPE>
<html>
<head>
    <style>
        body {
            margin: 0 auto;
            width: 60%;
        }
    </style>
</head>
<body>
    <!-- Rest of page. -->
</body>
</html>

它似乎更好，因为它删除了一个（不必要的）元素。使用这种方法时是否需要考虑任何陷阱？

【问题讨论】：

标签： html center margin

【解决方案1】：

我不推荐。不必要地在正文框上设置边距，最终使用负边距和绝对定位来突破。

坚持使用您的容器（或包装器）模型 - 它被广泛认为是最佳做法。检查此网站和任何其他专业设计网站的来源，您会看到相同的内容。

【讨论】：

【解决方案2】：

我一直在 body 上使用自动边距。您只需要记住，如果要为页面设置背景，则必须将其设置为 html 标记，因为人们通常将页面背景设置在 .

【讨论】：