CSS 谜题：margin auto + left + right 计算是如何工作的？

Question

我使用了这个布局：1 个响应式

div

，具有两个相等的部分和一个紫色固定大小

div

，应将响应式放置在左侧部分的中间（无论如何调整浏览器窗口的大小，

div.abs

停留在左侧部分的中心）

一种可能的解决方案如下所示（或此处）

解决方案

left: calc(25% - 20px);

很简单 - 取第一部分的中间（50% - 25% = 25% 并减去

div.abs

的一半）。

但是如果我们用

代替它

margin: auto;
left: -50%;
right: 0px; 

它仍在工作！

有人可以解释一下在这种情况下如何进行计算吗？

.container {
  display: flex;
  position: relative;
  border: 1px solid Tomato;
  margin: 20px;
  height: 50vh;
}

.abs {
  position: absolute;
  background-color: MediumPurple;
  width: 40px;
  height: 40px;
/*   margin: auto;
  left: -50%;
  right: 0px; */
  left: calc(25% - 20px);
  top: calc(50% - 20px);
}

.left {
  background-color: DarkSeaGreen;
  width: 50%;
}

.right {
  background-color: PapayaWhip;
  width: 50%;
}

<div class="container">
  <div class="abs"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

Answer 1

您需要参考规格和以下公式：

'左' + '左边缘' + '左边框宽度' + '左填充' + '宽度' + '右填充' + '右边缘宽度' + '右边缘' + ' right' = 包含块的宽度

我们没有边框和填充，因此我们可以简化为：

'left' + 'margin-left' + 'width' + 'margin-right' + 'right' = 包含块的宽度

那么以下内容将适用于您的情况：

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

那么我们来解方程：

left + 2*m + width + right = 100%
-50% + 2*m + 40px + 0 = 100%
2*m = 150% - 40px
m = 75% - 20px

现在，如果您定义的边距等于上面的值，并定义左或右，您会得到相同的结果：

.container {
  display: flex;
  position: relative;
  border: 1px solid Tomato;
  margin: 20px;
  height: 50vh;
}

.abs {
  position: absolute;
  background-color: MediumPurple;
  width: 40px;
  height: 40px;
  top: calc(50% - 20px);
  right: 0px; /* or left: -50% */
  margin: 0 calc(75% - 20px);
}

.left {
  background-color: DarkSeaGreen;
  width: 50%;
}

.right {
  background-color: PapayaWhip;
  width: 50%;
}

<div class="container">
  <div class="abs"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

基本上，您的元素位于点“左：-50％”和“右：0”之间的中心。因此，当您定义

margin: auto

时，您可以将元素置于您定义的 left 和 right 位置之间。这就是为什么元素居中需要左右相等。

相关问题：为什么magin:auto不足以使位置绝对或固定居中？