保证金：汽车;使用内联块

Question

我有一个＆＃34;容器＆＃34; div我向margin:auto;提供了width只要我给它一个特定的inline-block，但是现在我将其更改为margin:auto;而#container { border: 1px solid black; height: 500px; width: 650px; } .MtopBig { margin-top: 75px; } .center { margin-left: auto; margin-right: auto; text-align: center; } 无效

以前的css

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

新css

{{1}}

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

为什么'显示：内联块'不居中：

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

为什么'显示：阻止'中心：

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

'内联块'元素的解决方案：

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

Answer 3

对于属性 display：inline-block 的元素; ＆＃39; auto＆＃39;的计算值对于＆＃39; margin-left＆＃39;或者＆＃39; margin-right＆＃39;成为＆＃39; 0＆＃39;

的使用值

Answer 4

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