“margin: 0 auto”到底需要什么?上班吗?

我能想到的是:

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

在别人的头脑中:

4. 元素必须有一个不是auto²的width

注意，这些条件中的所有必须为真，元素居中才能工作。

¹ _{有一个例外:如果你的固定或绝对定位元素有left: 0; right: 0， 它将中心与自动边距。}

² _{从技术上讲，margin: 0 auto确实适用于auto width，但auto width优先于auto margin，因此auto margin被归零，使其看起来好像“不工作”。}

在我的脑海中，它需要一个width。你需要指定你正在居中的容器的宽度(不是父宽度)。

在我的脑海中，如果元素不是块元素-让它成为块元素。

然后给它一个宽度。

请查看我创建的jsFiddle的快速示例。希望这很容易理解。你可以使用wrapper div与网站的宽度居中对齐。你必须放置width的原因是，这样浏览器就知道你不是在进行流动布局。

也许有趣的是，你不必为<button>元素指定宽度来让它工作——只要确保它有display:block: http://jsfiddle.net/muhuyttr/

它还可以与display:table一起工作——在这种情况下，这是一个有用的显示属性，因为它不需要设置宽度。(我知道这篇文章已经5年了，但它仍然与路人有关;)

CSS的完整规则:

1. (display: block AND width not auto)或display: table
2. float: none
3. __abc0或__abc1

或

1. 父元素display: flex

以下是我的建议:

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;

首先，确保你试图居中的div没有设置为width: 100%。

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

对于现在遇到这个问题，并且无法修复margin: 0 auto的任何人，这里有一些我发现你可能会发现有用的东西:table元素没有指定宽度必须有display: table和不 display: block，以便margin: auto工作。这对某些人来说可能是显而易见的，因为display: block和默认值width的组合将给出一个扩展到填充其容器的表，但如果你table0表将其“自然”宽度table1居中，你需要display: table

如果你的父元素没有固定的宽度，让你的父元素带有display: flex对我来说是可行的。