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

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

使用 right 或 left（和 position: absolute），您将 div 绝对对齐到父元素，在您的情况下具有 0 偏移量。尝试在浏览器的开发者控制台中使用它们的值。

Answer 2

修复是绝对居中。你快到了：

position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;

您需要将所有四个方向设置为 0，您的 child div 将完全位于 parent.

的中心

Answer 3

您需要参考规范才能理解这一点。如果您的元素未使用 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.

所以只有设置了left、right和width，我们才能得到margin居中的效果。省略一个不会使元素居中。

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

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

Why magin:auto is not enough to center position absolute or fixed?

css

css-position