将 'margin: 0px auto' 应用于 body 元素不起作用答案

【问题标题】：Applying 'margin: 0px auto' to the body element doesn't work将 'margin: 0px auto' 应用于 body 元素不起作用
【发布时间】：2018-01-15 14:34:12
【问题描述】：

根据this answer，将display: block; float: none; position: relative; 放入选择器应确保margin: 0px auto 将元素水平居中的技巧有效。这是我尝试将body 居中在html 元素中的代码：

body {
    background-color: lightgray;
    float: left;
    font-family: 'Lato', 'Roboto', 'Arial', 'Verdana', sans-serif;

    margin: 0px auto;
    /* Adding these last 3 doesn't seem to make a difference */
    display: block;
    float: none;
    position: relative;
}

当我像0px 500px 那样手动指定像素时，效果很好。有谁知道为什么auto 在这种情况下似乎不起作用？

编辑：伙计们，即使我指定了正文的宽度，它也不起作用。 https://jsfiddle.net/ozm2x9zx/

【问题讨论】：

试图将body 或特定div 居中？如果你能提供一个小提琴它会更容易帮助！ :)
嗨詹姆斯，请删除浮动：左。然后就好了
该答案的作者在这里。您不需要明确指定这些内容。您只需要像其他人告诉您的那样摆脱 float: left 声明。您问题中的代码和小提琴中的代码不匹配。你确定你链接到了正确的小提琴吗？

标签： html css margin

【解决方案1】：

您必须提及宽度才能使其居中。

<style>
    body {
        margin: auto;
        width:50%;
    }
</style>

对于 0(Zero) 值也无需提及 px。

【讨论】：

请根据您的要求更改宽度%。
我试过width: 960px;。不幸的是，仍然无法正常工作。
请给%。示例 80%
Html 默认宽度为 100%。
嗨詹姆斯，请删除浮动：左。然后就好了

【解决方案2】：

您错过了您提到的答案中的第 4 点：

元素的宽度必须不是自动的

然后在注释中进行了解释：

从技术上讲，margin: 0 auto 确实适用于自动宽度，但自动宽度优先于自动边距，因此自动边距被清零，看起来好像它们“不起作用” .

所以给你的body 添加一个宽度，你会看到它起作用了。啊，但这里有一个问题：你将它应用到正文，而不是页面上的任何元素。它可以工作，但是除非您使html 的颜色与body 不同，否则您将看不到效果。试试这个：

html {
  background-color: red;
}

body {
  background-color: lightgray;
  float: left;
  font-family: 'Lato', 'Roboto', 'Arial', 'Verdana', sans-serif;
  margin: 0 auto;
  display: block;
  float: none;
  position: relative;
  width: 70%;
}

【讨论】：

感谢您的努力；我已经指定了宽度，但是它仍然无法正常工作。你能看看我在编辑我的问题时发布的 JSFiddle 吗？
它确实有效，但您的 CSS 中还有其他问题。这是forked fiddle。我用上面答案中的 CSS 替换了你所有的 CSS，所以你可以看到它在工作。当您将宽度设置为960px 时，您的显示器必须非常大，您才能在小提琴结果中看到它（占用不到一半的屏幕）。您需要更改body 和#container 的宽度，您将开始看到右侧的红色边距。然后你必须解决其他问题（例如删除float: left; 的行）。这是forked fiddle。
您不需要为 html 元素设置不同的颜色。仅从调整内容边距（假设您有足够宽的显示器）来看，效果应该很明显。
@BoltClock 如果您将我的答案中的代码复制到空白 HTML 页面（仅限 <html><head></head><body></body></html>），您将看到红色边距。注释掉html 的CSS 行，你只会看到灰色。当我发布我的答案时，OP 没有小提琴，只有 CSS，所以我不知道使用了什么 HTML 和 CSS。 html 元素的颜色在某些情况下是必需的。
当然，我是在附加的假设下发表评论的，即有内容，因为很有可能假设是真的；）（太好了，我忘了和显示一起说明它一个！）

【解决方案3】：

您需要从 body 元素上移除浮动，并且您的容器完美地位于中间。

此外，没有必要将单位类型 (px) 归于零值。

考虑：

  body {
        background-color: lightgray;
        background-image: url('../images/brushed.png');
        background-repeat: repeat;
        font-family: 'Lato', 'Roboto', 'Arial', 'Verdana', sans-serif;
        margin:0;
    }

    div#container {
        background-color: #aaaaaa;
        color: white;
        width: 960px;
        margin: 0 auto;
    }

【讨论】：

【解决方案4】：

我只是从正文中删除float:left;，它是居中的+

大多数时候 -> margin:0px auto; 可以很好地与 display:table; 配合使用

<html>
    <head>
        <title>My Favorite Films</title>

        <link type="text/css" rel="stylesheet" href="css/site.css" />

        <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet" />
		
		<style>
body {
    background-color: lightgray;
    background-image: url('../images/brushed.png');
    background-repeat: repeat;
    //float: left;  //removed
    font-family: 'Lato', 'Roboto', 'Arial', 'Verdana', sans-serif;
    margin: 0px auto;
    width: 960px;

}

div.clear-float {
    clear: both;
}

div.home-page-images {
    float: left;
    margin: 0px 0px 0px 25px;
}

div#container {
    background-color: #aaaaaa;
    color: white;
    width: 960px;
}

div#footer {
    background-color: gray;
    margin-top: 50px;
    padding: 5px 0px;
    text-align: center;
}

div#header {
    padding: 50px 0px;
}

div#nav {
    font-family: 'Playfair Display', serif;
    float: left;
    text-transform: uppercase;
    width: 200px;
}

div#nav a:hover, div#nav a:active {
}

div#nav a:link, div#nav a:visited {
    color: white;
    text-decoration: none;
}

div#nav li {
    margin: 0px 0px 20px 0px;
}

div#nav ul {
    list-style-type: none;
    overflow: hidden;
}

h1 {
    text-align: center;
}

h1.home-page-header {
    color: #bf0000;
    font-size: 60px;
}

img.home-page-image-row1 {
    float: left;
    width: 300px;
    height: 175px;
    margin-left: 50px;
    margin-top: 50px;
}

img.home-page-image-row2 {
    float: left;
    width: 250px;
    height: 150px;
    margin-left: 50px;
    margin-top: 50px;
}
		
		</style>
    </head>

    <body>
        <div id="container">
            <div id="header">
                <h1 class="home-page-header">My Favorite Films</h1>
            </div>

            <div id="content">
                <div id="nav">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="black_mirror.html">Black Mirror</a></li>
                        <li><a href="hoc.html">House of Cards</a></li>
                        <li><a href="inception.html">Inception</a></li>
                        <li><a href="interstellar.html">Interstellar</a></li>
                        <li><a href="st.html">Stranger Things</a></li>
                    </ul>
                </div>

                <div class="home-page-images-row1">
                    <img src="images/black_mirror_cover.jpg" class="home-page-image-row1" />
                    <img src="images/hoc_cover.jpg" class="home-page-image-row1" />
                    <div class="clear-float"></div>
                </div>

                <div class="home-page-images-row2">
                    <img src="images/inception_cover.jpg" class="home-page-image-row2" />
                    <img src="images/interstellar_cover.jpg" class="home-page-image-row2" />
                    <img src="images/st_cover.jpg" class="home-page-image-row2" />
                    <div class="clear-float"></div>
                </div>
            </div>

            <div class="clear-float"></div>

            <div id="footer">
                <h3>My Favorite Films</h3>
                <h4>By James Ko</h4>

                <p>Copyright &copy; 2017 James Ko. All rights reserved.</p>
            </div>
        </div>
    </body>
</html>

【讨论】：