为什么'margin: auto”不绝对居中或固定定位元素？

居中定位元素：超越 'margin: auto'

在 CSS 中，使用 margin: auto 属性居中元素可能会很棘手处理绝对定位或固定定位的元素。要理解这种行为，我们需要深入研究 CSS 规范。

流内元素居中

对于流内元素（没有绝对或固定定位），将 margin-left 和 margin-right 设置为 auto 可实现相对于包含块的水平居中。这是有效的，因为 CSS 规范规定，如果两个边距都设置为自动，则它们必须相等，从而导致元素居中。

绝对和固定元素居中

但是，当涉及到绝对或固定元素时，情况就不同了。 CSS 规范规定：

• 如果 left、width、right 三者均为 auto，则 margin-left 和 margin-right 值将设置为 0，防止自动居中。
• 如果 left、width 或 right 任何一个不是 auto，则其他两个属性的 auto 值设置为 0，并且剩余的边距同样计算。这会导致居中。
• 如果这三个属性都不是 auto，则 margin-left 和 margin-right 再次设置为 0，并应用特定规则来调整元素的位置。

将左和右设置为零

要使用 margin: auto 将绝对或固定元素居中，您必须还将 left 和 right 都设置为 0。这会强制浏览器同等地计算 margin-left 和 margin-right，从而导致水平居中。

但是，如果您为 left 或 right 指定任何其他值，则居中将除非您还设置了宽度，否则不会发生。省略这些属性之一将导致元素不居中。

真实示例

考虑以下代码：

.box {
  height: 50px;
  border: 1px solid;
  position: relative;
}

.box > div {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 200px;
  background-color: red;
  color: #fff;
}

在本例中，设置 left: 0 和 right: 0 可确保 div 始终与框的左右边缘齐平。 margin: auto 属性然后将 div 在框中水平居中。

以上是为什么'margin: auto”不绝对居中或固定定位元素？的详细内容。更多信息请关注PHP中文网其他相关文章！