我知道设置边际:0自动;用于使元素居中(左右)。然而,我知道元素和它的父元素必须满足自动裕度工作的某些标准,而且我似乎从来没有得到正确的魔法。

所以我的问题很简单:为了获得margin: 0 auto;左右中间的孩子?


当前回答

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

其他回答

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

如果你的父元素没有固定的宽度,让你的父元素带有display: flex对我来说很有效。

CSS的完整规则:

(显示:块和宽度不是自动的)或显示:表 浮:没有 位置:相对或位置:静态

OR

带有display: flex的父元素

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

我能想到的是:

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

在别人的头脑中:

元素的宽度必须不是auto2

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


有一个例外:如果你的固定或绝对定位元素已经离开:0;右:0,它将以汽车边际为中心。

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