为什么magin:auto不足以将位置绝对或固定居中？

Question

我试图将 div 的内容居中，我的父容器设置为“相对”。

我在内部 div 上使用它

    position: absolute;
    margin: auto;
    width: 70px;
    height: 70px;

但它拒绝居中，我不得不添加左侧和右侧的0，但我不明白为什么即

    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    width: 70px;
    height: 70px;

我以为居中只需要一个宽度，这是有的。

我有点困惑为什么将右/左设置为 0 - 似乎有效。

另外，如果图像是 70 像素，父框是 200 像素（确实如此），将右侧设置为 0，左侧设置为 0 - 这实际上是在做什么？

任何想法，我可能没有正确理解。

谢谢。

Answer 1

您需要参考规范来理解这一点。如果您的元素未使用定位，position:absolute那么您需要考虑本节，您可以在其中阅读：

如果 'margin-left' 和 'margin-right' 均为 'auto'，则它们的使用值相等。这使元素相对于包含块的边缘水平居中。

对于流入元素，除了宽度之外，只需要边距。

当谈到position:absolute元素时，我们参考本节

如果 'left'、'width' 和 'right' 三个均为 'auto'：首先将 'margin-left' 和 'margin-right' 的所有 'auto' 值设置为 0

很明显，如果您没有看到任何左、右或宽度，边距将被计算为0（无居中）

如果这三个都不是“auto”：如果“margin-left”和“margin-right”都是“auto”，则在两个边距值相等的额外约束下求解方程

当您设置左、右和宽度时，边距将获得相等的值（我们可以通过公式找到）并且您将居中。

如果您继续阅读，您还可以看到：

否则，将“margin-left”和“margin-right”的“auto”值设置为0，并选择以下适用的六个规则之一。

因此，只有设置左、右和宽度，我们才能获得边距居中的效果。省略一个不会使元素居中。

下面通过一个示例来说明规范中详细介绍的 8 种不同情况。

.box {
  height:50px;
  border:1px solid;
  position:relative;
  margin:5px;
}
.box > div {
  position:absolute;
  left:0;
  right:0;
  margin:auto;
  width:200px;
  background:red;
  color:#fff;
}

<div class="box">
  <div>some text</div>
</div>
<div class="box">
  <div style="width:auto;">some text</div>
</div>
<div class="box">
  <div style="left:auto">some text</div>
</div>
<div class="box">
  <div style="left:auto;width:auto">some text</div>
</div>
<div class="box">
  <div style="right:auto">some text</div>
</div>
<div class="box">
  <div style="right:auto;width:auto;">some text</div>
</div>
<div class="box">
  <div style="right:auto;left:auto;">some text</div>
</div>
<div class="box">
  <div style="right:auto;left:auto;width:auto;">some text</div>
</div>

值得注意的是，您不一定需要0，但需要指定与auto左和右相同的任何不同值。

.box {
  height:50px;
  border:1px solid;
  position:relative;
  margin:5px;
}
.box > div {
  position:absolute;
  left:0;
  right:0;
  margin:auto;
  width:200px;
  background:red;
  color:#fff;
}

<div class="box">
  <div>some text</div>
</div>
<div class="box">
  <div style="left:10px;right:10px;">some text</div>
</div>
<div class="box">
  <div style="left:-10px;right:-10px;">some text</div>
</div>
<div class="box">
  <div style="left:50px;right:50px;">some text</div>
</div>
<div class="box">
  <div style="left:300px;right:300px;">some text</div>
</div>
<div class="box">
  <div style="left:3000px;right:3000px;">some text</div>
</div>

当然，当两个值都很大时，由于以下规则，您将不会获得中心效果：

..除非这会使它们为负，在这种情况下，当包含块的方向为“ltr”（“rtl”）时，将“margin-left”（“margin-right”）设置为零并求解“margin-right” '（'左边距'）。如果“margin-left”或“margin-right”之一为“auto”，请求解该值的方程。如果值过度约束，则忽略“left”（如果包含块的“direction”属性为“rtl”）或“right”（如果“direction”为“ltr”）的值并求解那个值。

当涉及垂直方向（顶部、底部和高度）时，考虑的几乎相同： https: //www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height