`margin：auto;`不适用于嵌入式块元素

Question

我给了div一个“容器” margin:auto;。

只要我给它指定一个特定的width，它就可以正常工作，但是现在我将其更改为inline-block，margin:auto;停止了工作

旧代码（有效）

#container {
    border: 1px solid black;
    height: 200px;
    width: 200px;
}
.MtopBig {
    margin-top: 75px;
}
.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

<div class="center MtopBig" id="container"></div>

新代码（无效）

#container {
    border: 1px solid black;
    display: inline-block;
    padding: 50px;
}
.MtopBig {
    margin: 75px auto;
    position: relative;
}
.center {
    text-align: center;
}

<div class="center MtopBig" id="container"></div>

DEMO fiddle。

Answer 1

它不再居中，因为它现在以与inline元素相同的方式在页面上流动（非常类似于img元素）。您必须text-align: center包含元素才能将inline-block div居中。

#container {
    border: 1px solid black;
    display: inline-block;
    padding: 50px;
}
.MtopBig {
    margin: 75px auto;
    position: relative;
}
.center {
    text-align: center;
}

<div class="center">
    <div class="MtopBig" id="container"></div>
</div>

Answer 2

'auto'的意思是：

将auto用于水平边距将指示元素填充可用空间（源：http://www.hongkiat.com/blog/css-margin-auto/）。

为什么'display：inline-block'不居中：

内联设置中没有可用的水平空间。在它之前和之后的其他内联元素（字符）都占据了自己的空间。因此，该元素将像水平边距设置为零一样起作用。

为什么'display：block'居中：

[当用作设置了display: block的元素时，可用的水平空间将是父元素的整个宽度减去元素本身的宽度。这是有道理的，因为display: block保留了此水平空间（因此使其“可用”）。请注意，带有display: block的元素不能彼此相邻放置。唯一的例外发生在您使用float时，但在那种情况下，您还会获得（预期的）零利润行为，因为这会禁用水平的“可用性”。

'inline-block'元素的解决方案：

具有display: inline-block的元素应作为字符处理。居中字符/文本可以通过将text-align: center添加到其父对象来完成（但您可能已经知道...）。

Answer 3

对于具有属性display：inline-block的元素；['margin-left'或'margin-right'的'auto'的计算值变成了'0'的使用值。 [参考：CSS2§10.3.9]