Question

为什么'左右边距设置为自动和最大。和分钟。宽度'居中一个元素？

#header{
    max-width: 1400px;
    min-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

我不明白。

Answer 1

它将元素右侧和左侧的空白总和除以2并将其用作 margin-left 和 margin-right ，从而使它居中。另一种思考方式是从父级的宽度中减去子级的宽度，然后将其除以2.

实际上， margin-left 和 margin-right 仍设为 auto ，所以如果你尝试在JavaScript中获取它们的值，你将获得 "auto" ，但这就是它背后的逻辑。

背后的数学是：

marginLeft = (parentWidth - childWidth) / 2
marginRight = marginLeft

Answer 2

由于右边距和左边距中的auto均匀占据“可用”空间，因此元素与中心对齐。

带有auto的左边距或右边距会占用所有“可用”空间，使元素看起来像是向右或向左冲洗。

查看此source以获取更多信息。

您可以通过以下演示轻松了解：

div{
  max-width: 300px;
  background-color: red;
  margin-left: auto;
}

<div>
auto
</div>

在上面的代码片段中，您可以看到当您使用margin-left auto时，div占用了所有可用空间，因此它向右推。现在，您可以通过使用margin-right:auto;来思考将元素向左推。因此，使用两者都会强制它占据两个可用空间。

Answer 3

由于我对其他答案的详尽性不满意，这里有更详细的解释。一般而言，w3c Recommendation详细阐述了这一点，应该就需要更精确答案的问题进行咨询。

典型用例margin: 0 auto（顶部和底部设置为0，左侧和右侧为自动）的工作方式是让浏览器计算可用空间并将其应用于每个auto值财产，平均划分。

试图在其背后提供数学＆＃34;示例（我把它放在引号中，因为它是一个非常简化的实际数学可视化）更接近于此：

availableSpace = (parentWidth - childWidth)
marginLeft, marginRight = availableSpace / amountOfAutoValues

这将在以下条件下工作（简化）：

它不是absolute - 或fixed - 定位
它没有浮动
它不是inline元素（这是与＃34;它必须是block元素＆＃34;，这是错误的 - 例如，{{ 1}}“没有工作”

这是因为这些模式已经覆盖了文档中对象的位置，计算边距可能不太有利。

唯一的要求就是技术上适用的保证金设置 - 您只需将inline-block（或width）设置为小于父级，以便查看效果，与任何其他情况一样，可用空间仅为max-width 0永远不会以这种方式对自动边距产生任何影响。

Answer 4

如果使用max-width代替min-width而display:table使用了margin + auto值以及代码的其余部分，则可以获得相同的结果。如果只留下margin-left，它会与页面的最右边角对齐，如果只留下margin-right，它会对齐到最左边，现在你认为如果留下它会怎么样？ margin-left margin-right？我很确定你不会创造一个悖论。：）

-------------------------> margin-left:auto

margin-right:auto <------------------------

margin-left:auto <-------> margin-right:auto

CSS中心元素

4 个答案: