CSS 绝对位置不适用于 margin-left:auto margin-right: auto

Question

假设您将以下 CSS 应用于 div 标签

.divtagABS {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
}

margin-left 和 margin-right 不生效

但如果你有亲戚，它工作正常即

.divtagREL {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

这是为什么？我只想让一个元素居中。

有人可以解释为什么在绝对位置将边距设置为 auto 不起作用吗？

原文由 user1118019 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

编辑：这个答案曾经声称不可能将绝对定位的元素与 margin: auto; ，但这根本不是真的。因为这是投票最多和接受度最高的答案，所以我想我只是将其更改为正确的。

当您将以下 CSS 应用于元素时

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

然后给元素一个固定的宽高，比如200px或者40%，元素 会 自己居中。

这是 一个演示效果的小提琴。

原文由 Kevin Bowersox 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我已经 使用这个技巧将一个绝对定位的元素居中。但是，您必须知道元素的 width 。

 .divtagABS {
    width: 100px;
    position: absolute;
    left: 50%;
    margin-left: -50px;
  }

基本上，您使用 left: 50% ，然后将其退回它的一半 width 负数 margin 。

原文由 chipcullen 发布，翻译遵循 CC BY-SA 4.0 许可协议