3

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

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

<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>

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

4

3 回答 3

7

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

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

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

于 2012-06-05T08:07:48.337 回答
2

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

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

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

于 2012-06-05T08:08:14.037 回答
2

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

于 2012-06-05T08:11:44.393 回答