确切地说,"margin:0 auto"需要什么？上班？

Question

我知道margin: 0 auto;元素上的设置用于居中(左 - 右).但是,我知道元素及其父元素必须满足某些标准才能使自动边距起作用,而我似乎永远无法获得正确的魔力.

所以我的问题很简单:必须在元素及其父元素上设置什么CSS属性才能让margin: 0 auto;孩子左右中心？

Answer 1

脱离我的头顶:

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

脱离其他人的头脑:

4. 元素必须width不是auto²

请注意,所有这些条件必须适用于居中的元素才能工作.

¹ _{有一个例外:如果您的固定元素或绝对定位元素具有left: 0; right: 0,则它将以自动边距为中心.}

² _{从技术上讲,margin: 0 auto它可以使用自动宽度,但自动宽度优先于自动边距,因此自动边距会被清零,使它看起来好像"无法正常工作".}

Answer 2

在我的头顶,它需要一个width.您需要指定要居中的容器的宽度(而不是父宽度).

Answer 3

CSS的完整规则:

1. (display: block及width未自动)或display: table
2. float: none
3. position: relative

Answer 4

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

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