css - 为什么 magin :auto is not enough to center position absolute or fixed?

Question

我试图将 div 的内容居中，我的父容器设置为 Relative。

我在内部div上使用它

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

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

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

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

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

此外，如果图像为 70px 且父框为 200px(实际情况如此)，则将 right 设置为 0，将 left 设置为 0 - 这实际上在做什么？

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

谢谢。

Answer 1

你需要引用规范来理解这一点。如果您的元素未使用 position:absolute 定位，那么您需要考虑 this section你可以在哪里阅读:

If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

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

---

当谈到 position:absolute 元素时，我们指的是 this section

If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0

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

If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values

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

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

Otherwise, set 'auto' values for 'margin-left' and 'margin-right' to 0, and pick the one of the following six rules that applies.

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

下面的示例说明了规范中详述的 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>

当然，当两个值都很大时，由于这条规则，你不会得到中心效应:

..unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.

---

垂直方向(顶部、底部和高度)几乎相同:https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height