为什么 `margin: auto` 不绝对居中或固定位置的元素？

为什么 Margin:auto 单独无法使定位元素居中

尝试使用以下位置将 div 元素在父容器中居中时： Absolute 或position: 固定属性，单独使用margin: auto 可能不够。

理解CSS 规范

根据CSS 规范，对于position 的元素：相对或位置：静态（正常流程），将 margin-left 和 margin-right 设置为自动将元素相对于其包含块水平居中，因为它们的使用值变得相等。但是，这不适用于position:absolute或position:fixed的元素。

对于绝对或固定定位的元素，其中left、width、right三者均为auto，则使用margin-left的值和 margin-right 设置为 0 以防止居中。要使这些元素居中，必须定义左、右或宽度的值。

设置左、右和宽度的效果

如果左、右，和宽度都已定义，边距得到相等的值，从而导致居中。省略任何这些值都会导致元素偏离中心对齐。

不同情况的演示

下表演示了各种情况，如 CSS 中所述规格：

Margin Setting	Centring
margin-left: auto; margin-right: auto	Yes (flow element)
margin-left: auto; margin-right: auto	No (absolute/fixed element)
left: auto; right: auto; width: auto	No (margin set to 0)
left: 0; right: 0; width: auto	No (margin set to 0)
right: auto; left: auto;	No (margin set to 0)
left: auto; right: auto; width: 200px	Yes (equal margins)
left: 0; width: auto	Yes (equal margins)
right: 0; width: auto	Yes (equal margins)

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