Question

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

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

保证金左边和保证金权利没有生效

但如果你有亲戚，那就行得很好即。

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

为什么？我只是想要一个元素

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

Answer 1

编辑：这个答案过去声称无法将margin: auto;置于绝对定位的元素中心，但事实并非如此。因为这是最高投票和接受的答案，我猜我只是将其改为正确。

将以下CSS应用于元素

时

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

然后给元素一个固定的宽度和高度，例如200px或40％，元素将居中。

这是展示效果的a Fiddle。

Answer 2

我used this trick to center an absolutely positioned element。但是，你必须知道元素的宽度。

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

基本上，你使用左：50％，然后将它的宽度减半，带有负边距。

Answer 3

如果绝对元素有宽度，则可以使用下面的代码

.divtagABS{
    width:300px;
    positon:absolute;
    left:0;
    right:0;
    margin:0 auto;
}

Answer 4

在下面使用JSFiddle。 当使用绝对位置时，margin: 0 auto将不起作用，但您可以这样做（也将缩放）：

left: 50%;
transform: translateX(-50%);

更新：工作JSFiddle

Answer 5

我已经遇到了同样的问题，并且我已经找到了一个绝对定位容器（.divtagABS-container，在你的情况下）的解决方案，然后将内容相对定位在其中（.divtagABS，在你的情况下）。

完成！您的.divtagABS的margin-left和margin-right AUTO现在可以正常工作。

Answer 6

所有答案均只是建议的解决方案或解决方法。但是仍然没有得到以下问题的答案：为什么margin：auto与position：relative一起使用，而与position：absolute不兼容。

以下说明对我有帮助：

“绝对定位元素的边距意义不大，因为此类元素已从正常流程中删除，因此它们不能推开页面上的任何其他元素。使用此类边距只会影响展示位置应用于边距的元素，而不是其他任何元素。” http://www.justskins.com/forums/css-margins-and-absolute-82168.html

Answer 7

如果元素绝对位置，那么它不是相对的，或者是对任何对象的引用 - 包括页面本身。因此，margin: auto;无法确定中间位置。

等待明确告知，使用left和top来定位自己。

你仍然可以使用javascript或其他方式以编程方式居中。

Answer 8

当您为absolute定位的分区定义样式时，它们指定边距是无用的。因为它们不再位于常规DOM树中。

你可以使用float来做这个伎俩。

.divtagABS {
    float: left;
    margin-left: auto;  
    margin-right:auto;
 }

css绝对位置不适用于margin-left：auto margin-right：auto

8 个答案: