html - `margin:auto;` 不适用于行内 block 元素

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>