css - "margin: 0 auto;"工作到底需要什么？

Question

我知道在元素上设置 margin: 0 auto; 用于将其居中(左右)。但是，我知道该元素及其父元素必须满足某些条件才能使自动边距起作用，但我似乎永远无法正确施展魔法。

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

Answer 1

在我的脑海中:

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

脱离他人的头脑:

1. 元素的宽度必须不是auto²

请注意，所有这些条件必须满足元素居中才能起作用。

---

¹ _{有一个异常(exception):如果你的固定或绝对定位元素有 left: 0;右:0，it will center with auto margins .}

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