Question

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

如果我希望我的整个页面内容都在一个居中的列中，让我们说 - 宽度为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>

我的问题是 - 这两种方法中的一种是否比其他方法有任何优势？还是有缺点？是否有一个共同的“最佳解决方案”来集中主列？

Answer 1

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

margin-left:50%;与父母有关。例如，如果容器宽度为1000px，则子元素的左边距为500px。但是，这不会使元素居中，它会将其左侧放在中间 - 除非您在子元素上使用固定值进行破解，如示例所示。

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

Answer 2

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

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

第二种方法是黑客攻击，它是现代浏览器中不需要的黑客攻击。

Answer 3

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

保证金：0px自动VS保证金：-50％

3 个答案: