确切地说，“margin：0 auto”需要什么？上班？

Question

我知道在元素上设置margin: 0 auto;用于居中（左 - 右）。但是，我知道元素及其父元素必须满足某些标准才能使自动余量发挥作用，而且我似乎永远无法获得正确的魔力。

所以我的问题很简单：必须在元素及其父元素上设置哪些CSS属性才能使margin: 0 auto;左右居中于孩子？

Answer 1

脱离我的头顶：

1. 元素必须是块级的，例如display: block或display: table
2. 元素不得浮动
3. 元素不得具有固定或绝对位置 ¹

脱离其他人的头脑：

1. 该元素的width必须不是auto ²

请注意，这些条件的所有必须为中心元素才能生效。

---

¹ _{这有一个例外：如果你的固定元素或绝对定位元素有left: 0; right: 0，it will center with auto margins。}

² _{从技术上讲，margin: 0 auto可以使用自动宽度，但自动宽度优先于自动边距，因此自动边距归零，使它看起来好像“不起作用”。}

Answer 2

在我的头顶，它需要一个width。您需要指定要居中的容器的宽度（而不是父宽度）。

Answer 3

完整的CSS规则：

1. （display: block和width非自动）或display: table
2. float: none
3. position: relative

Answer 4

如果元素不是块元素，请从我的头顶开始 - 这样做。

然后给它一个宽度。

Answer 5

离开我的猫头顶部，确保您尝试居中的div未设置为width: 100%。

如果是，那么在子div上设置的规则就是重要的。

Answer 6

请转到我创建jsFiddle的快速示例。希望它很容易理解。您可以使用wrapper div与网站的宽度居中对齐。你必须放width的原因是浏览器知道你不会采用流畅的布局。

Answer 7

它也适用于display：table - 在这种情况下是一个有用的显示属性，因为它不需要设置宽度。 （我知道这篇文章已有5年历史了，但它仍与路人有关;）

Answer 8

这是我的建议：

First: 
      1. Add display: block or table
      2. Add position: relative
      3. Add width:(percentage also works fine)
Second: 
      if above trick not works then you have to add float:none;

Answer 9

如果您的父元素没有固定宽度，则让带有 display: flex 的父元素对我有用。

Answer 10

对于刚刚遇到此问题并且无法修复margin: 0 auto的任何人，这是我发现您可能会发现的有用内容：table元素没有指定宽度必须有display: table和 not display: block才能使margin: auto工作。这对于某些人可能是显而易见的，因为display: block和默认值width的组合将提供一个表，该表会扩展以填充其容器，但是如果您想要取其“自然”宽度 居中，则需要display: table