为什么 Margin: Auto 并不总是将元素居中？

Margin:auto 不足以使定位元素居中

当尝试水平居中绝对或固定定位元素时，margin: auto 属性单独可能还不够。

对于流内元素（没有位置的元素：绝对或固定），仅设置宽度就足够了。 Margin：auto 会自动平衡左右边距，使元素居中。

但是，对于定位元素，情况就不同了。根据 CSS 规范：

• 如果 left、right 和 width 均为 auto，则 margin-left 和 margin-right 都设置为 0，导致不居中。
• 如果left、right 和 width 不都是 auto，margin-left 和 margin-right 设置为相等的值，这会导致居中。

要使定位元素居中：

1.设置左、右和宽度

position: absolute;
left: 0;
right: 0;
width: 70px;

2。将 margin-left 和 margin-right 设置为 auto （可选）

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

将 left 和 right 设置为 0 实质上定义了元素可以移动的左右边界。 Margin: auto 然后平衡这些边界之间的空间。

示例：

考虑一个宽度为 200px 的父元素和一个宽度为 绝对定位的子元素70px:

parent {
  width: 200px;
  position: relative;
}
child {
  position: absolute;
  left: 0;
  right: 0;
  width: 70px;
  margin: auto; /* Optional */
}

当使用 margin: auto 时，子元素相对于父元素水平居中。这是因为计算出的边距（左边距和右边距）相等，这有效地将子项定位在可用空间的中间。

以上是为什么 Margin: Auto 并不总是将元素居中？的详细内容。更多信息请关注PHP中文网其他相关文章！