CSS “margin: 0 auto;”究竟需要什么？上班？

What, exactly, is needed for "margin: 0 auto;" to work?

提问by Chowlett

I know that setting margin: 0 auto;on an element is used to centre it (left-right). However, I know that the element and its parent must meet certain criteria for the auto margin to work, and I can never seem to get the magic right.

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

So my question is simple: what CSS properties have to be set on an element and its parent in order for margin: 0 auto;to left-right centre the child?

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

回答by BoltClock

Off the top of my head:

在我的头顶：

1. The element must be block-level, e.g. display: blockor display: table
2. The element must not float
3. The element must not have a fixed or absolute position¹

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

Off the top of other people's heads:

在其他人的头顶上：

1. The element must have a widththat is not auto²

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

Note that allof these conditions must be true of the element being centered for it to work.

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

---

---

¹_{There is one exception to this: if your fixed or absolutely positioned element has left: 0; right: 0, it willcenter with auto margins.}

¹_{有一个例外：如果你的固定或绝对定位的元素有left: 0; right: 0，它会与汽车的利润中心。}

²_{Technically, margin: 0 autodoes work with an auto width, but the auto width takes precedence over the auto margins, and the auto margins are zeroed out as a result, making it seem as though they "don't work".}

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

回答by Russell Dias

Off the top of my head, it needs a width. You need to specify the width of the container you are centering (not the parent width).

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

回答by Luca C.

Complete rule for CSS:

CSS 的完整规则：

1. (display: blockAND widthnot auto) OR display: table
2. float: none
3. position: relative

1. （display: block并且width不是自动）或display: table
2. float: none
3. position: relative

回答by Barrie Reader

Off the top of my head, if the element is not a block element - make it so.

在我的头顶上，如果元素不是块元素 - 让它如此。

and then give it a width.

然后给它一个宽度。

回答by j1mm1nycr1cket

It will also work with display:table - a useful display property in this case because it doesn't require a width to be set. (I know this post is 5 years old, but it's still relevant to passers-by ;)

它也适用于 display:table - 在这种情况下是一个有用的显示属性，因为它不需要设置宽度。（我知道这个帖子已经 5 年了，但它仍然与路人相关；）

回答by Sam Malayek

Off the top of my cat's head, make sure the divyou're trying to center is not set to width: 100%.

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

If it is, then the rules set on the child divs are what will matter.

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

回答by Anirban Bhui

Here is my Suggestion:

这是我的建议：

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;

回答by Chin

Please go to this quick example I've created jsFiddle. Hopefull it's easy to understand. You can use a wrapperdiv with the width of the site to center align. The reason you must put widthis that so browser knows you are not going for a liquid layout.

请转到我创建的这个快速示例jsFiddle。希望它很容易理解。您可以使用具有wrapper站点宽度的 div 来居中对齐。您必须放置的原因width是浏览器知道您不会使用液体布局。

回答by qbolec

It's perhaps interesting that you do not have to specify width for a <button>element to make it work - just make sure it has display:block: http://jsfiddle.net/muhuyttr/

有趣的是，您不必为<button>元素指定宽度即可使其工作 - 只需确保它具有display:block：http: //jsfiddle.net/muhuyttr/

回答by samson

For anybody just now hitting this question, and not being able to fix margin: 0 auto, here's something I discovered you may find useful: a tableelement with no specified widthmust have display: tableand notdisplay: blockin order for margin: autoto do work. This may be obvious to some, as the combination of display: blockand the default widthvalue will give a table which expands to fill its container, but if you wantthe table to take it's "natural" width andbe centered, you need display: table

对于刚刚遇到这个问题但无法修复margin: 0 auto的任何人，我发现您可能会发现一些有用的东西：没有指定宽度的table元素必须具有，而不是为了工作。这对某些人来说可能很明显，因为和 默认值的组合将提供一个可以扩展以填充其容器的表格，但是如果您希望表格采用它的“自然”宽度并居中，则需要display: tabledisplay: blockmargin: autodisplay: blockwidthdisplay: table