`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

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

Answer 3

“自动”是什么意思：

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

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

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

为什么“显示：阻止”中心：

当用作设置了display: block 的元素时，可用的水平空间将是父元素的全宽减去元素本身的宽度。这是有道理的，因为display: block 保留了这个水平空间（从而使其“可用”）。请注意，带有display: block 的元素不能并排放置。唯一的例外发生在您使用 float 时，但在这种情况下，您也会得到（预期的）零边距行为，因为这会禁用水平“可用性”。

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

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

Answer 4

margin-left:50%;
transform: translateX(-50%);

.container{
  border:solid 1px red;
}

.container img{
  display:inline-block;
  margin-left:50%;
  transform: translateX(-50%);
}

<div class="container">
  <img src="https://placekitten.com/100/300" />
</div>