Question

根据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/

Answer 1

你必须提到宽度才能使它居中。

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

对于 0（零）值，也无需提及 px 。

Answer 2

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

元素必须具有非自动
的宽度

然后在笔记中解释了这一点：

从技术上讲，保证金：0自动适用于自动宽度，但自动宽度优先于自动边距，因此自动边距被归零，使得它看起来好像“不起作用”

因此，为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%;
}

Answer 3

你需要移除身体元素上的浮子，你的容器完全位于中间。

此外，无需将单位类型（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;
    }

Answer 4

大部分时间 - ＆gt;使用float:left;

可以正常使用margin:0px auto;

display:table;

应用＆＃39;保证金：0px auto＆＃39;身体元素不起作用

4 个答案: