边距：0px 自动 VS 边距：-50%答案

【问题标题】：margin: 0px auto VS margin: -50%边距：0px 自动 VS 边距：-50%
【发布时间】：2012-06-09 06:06:48
【问题描述】：

我即将为一个新的小项目编写一些模板 - 我只是想知道一件事：

如果我希望我的整个页面内容位于一个居中的列内，并且 - 比如说 - 800 像素宽度，通常的做法是这样（至少，这是我一直这样做的方式）：

<html>
    <head>
        <style>
            body {
                text-align: center; /* IE6 */
            }

            #wrapper {
                margin: 0px auto;
                width: 800px;
                background-color: #eee; /* to see it better */
                text-align: left; /* IE6 */
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            ... content ...
        </div>
    </body>
</html>

现在，还有另一种方法可以做同样的事情，但使用margin: -50%;（或固定值，在本例中为margin: 400px;），如下所示：

<html>
    <head>
        <style>
            body {
                margin-left: 50%;
            }

            #wrapper {
                margin-left: -400px;
                width: 800px;
                background-color: #eee; /* to see it better */
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            ... content ...
        </div>
    </body>
</html>

我的问题是 - 这两种方法中的一种是否比另一种有任何优势？还是缺点？是否有一个常见的“最佳解决方案”来使主列居中？

【问题讨论】：

标签： html css centering

【解决方案1】：

margin:0 auto; 将确保元素两侧的空间相等。

margin-left:50%; 是相对于父级的。例如，如果容器的宽度为 1000 像素，则子元素的左边距为 500 像素。但是，这不会使元素居中，它会将其左侧放在中间 - 除非您像示例中那样在子元素上使用固定值来破解它。

通常，当您处理与您的情况一样的包装器时，margin:0 auto; 是最简单和最灵活的解决方案。在其他情况下，您可能会发现使用百分比或固定值会更好（例如，在浮动内容时）。

【讨论】：

非常感谢，真的很有帮助

【解决方案2】：

在这种情况下我只使用第一种方法。

它更加灵活，因为如果我想更改主 div 的大小，或者如果我想支持其他设备，则需要的更改要少得多。

第二种方法是hack，它是现代浏览器不需要的hack。

【讨论】：

【解决方案3】：

由于您为主体提供 50% 的边距以推动元素，并再次为包装器提供负边距以将其拉到前一个位置，因此此方法有效。但有时浏览器无法正确呈现它。see the question here.

【讨论】：

是的，我猜旧的 IE 版本可能会在负边距下表现不同。感谢您的信息！