“margin: 0 auto;”究竟需要啥？去工作？

Posted 2023-03-06

【中文标题】“margin: 0 auto;”究竟需要啥？去工作？

【英文标题】：What, exactly, is needed for "margin: 0 auto;" to work?“margin: 0 auto;”究竟需要什么？去工作？

【发布时间】：2011-06-24 17:12:10

【问题描述】：

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

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

【问题讨论】：

这对我来说在 IE 中似乎永远无法正常工作......所以我也很好奇。

@Mark：IE 只会在标准模式下正确处理margin: 0 auto;，所以你需要一个文档类型（好像以前不需要）。

【参考方案1】：

在我的头顶：

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

在别人的头顶上：

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

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

---

¹_{有一个例外：如果您的固定或绝对定位元素有left: 0; right: 0、it will center with auto margins。}

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

【讨论】：

加上固定宽度，你就得到了完美答案

我错过了ol start 属性（而且在 Markdown 中无法实现）:(

干杯，这似乎确实有效。不过，要让ul 的lis 均匀分布在它上面仍然很困难，但我想那是一锅不同的鱼。

这是公牛。我有一个绝对定位的元素，其中 margin:auto 居中。我设置位置：绝对；左：0；右：0；下：0；上：0；边距：自动；它居中。这是障碍，例如，如果要居中的元素是 img 或画布，那么只需设置 html 宽度/高度属性即可。但是，如果是 DIV，则 HTML 宽度/高度是不够的，您必须设置 CSS 宽度/高度。极其奇怪和不一致的行为。 ***.com/q/31928807/88409

@Triynko：这个问题和我的回答都没有提到 HTML 表示属性（这个问题甚至没有被标记为 [html]！），所以我不确定你到底在说什么牛逼。无论如何，虽然可以使用 CSS 定位的每个元素都可以具有 CSS 宽度和高度属性，但并非所有 HTML 元素都可以具有相应的表示属性，其原因很简单，将它们放在某些位置是没有意义的HTML 元素。

【参考方案2】：

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

【讨论】：

一切都在我们的脑海中浮现！

【参考方案3】：

CSS 的完整规则：

（display: block AND width 不是自动）或 display: table float: none position: relative 或 position: static

或

带有display: flex的父元素

【讨论】：

位置：静态也不错。

【参考方案4】：

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

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

【参考方案5】：

如果该元素不是块元素，那就别想了 - 就这样吧。

然后给它一个宽度。

【参考方案6】：

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

【参考方案7】：

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

【参考方案8】：

这是我的建议：

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;

【参考方案9】：

如果您的父元素没有固定宽度，则使用 display: flex 的父元素对我有用。

【参考方案10】：

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

【参考方案11】：

对于刚刚遇到这个问题但无法解决 margin: 0 auto 的任何人，我发现您可能会发现以下内容对您有用：table 元素没有指定宽度必须有 @987654324 @ 和 not display: block 以便 margin: auto 工作。这对某些人来说可能是显而易见的，因为 display: block 和默认的 width 值的组合将给出一个扩展以填充其容器的表格，但如果您想要表格采用它是“自然的” " 宽度和居中，你需要display: table

【讨论】：

That isn't true.（虽然如果你只是给它display: block那么它不会满足接受答案的条件4）

@Quentin 感谢您的提醒。就我而言，我不想希望表格填满水平空间（这似乎可以排除关于 margin: 0 auto 的整个讨论）而且我也不能指定表格的宽度，因为它的内容可能有不同的宽度。在这种情况下，唯一有效的解决方案（即以正常方式呈现表格但居中）是 no 宽度规则，display: table 和 margin: 0 auto