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;
}

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

有人可以解释为什么在绝对位置设置自动保证金不起作用吗？

Answer 1

编辑:这个答案过去声称不可能将绝对定位的元素居中margin: auto;,但这根本不是真的.因为这是最高投票和接受的答案,我猜我只是改变它是正确的.

将以下CSS应用于元素时

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

然后给元素一个固定的宽度和高度,例如200px或40%,元素将自身居中.

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

网址:http://www.vision.to/articles/margins-and-absolute-positioning.php无效,请更换 (3认同)
"具有绝对位置的元素不能居中......"实际上,这是_not_ true:关键是将所有`top/bottom/left/right`属性设置为`0`并声明`width`和`height`,然后`margin:auto`将自动居中绝对定位的元素.参见:[绝对居中技术](http://codepen.io/shshaw/details/gEiDt); 它也在[Smashing Magazine]上(https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/). (2认同)
为了使宽度伪动态，请使用 `width: 100%;` 和（即）`max-width: 500px;`。 (2认同)
我认为你只需要设置左、右和（最大）宽度即可使其居中，不需要底部或顶部进行水平对齐。尽管为了最佳实践，您应该至少设置其中之一，这样浏览器就不会误解 (2认同)

Answer 2

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

基本上,你使用左:50%,然后将它的宽度减半,带有负边距.

@AaronHarun - 遗憾的是,没有那样不会按你期望的方式工作.我认为25%将基于父母的宽度.我设置了一个代码笔来测试它:http://codepen.io/chippper/pen/xwKIl - 你可以切换CSS的最后一行来看看我的意思. (4认同)

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