css absolute position won't work with margin-left:auto margin-right: auto
假设您将以下CSS应用于div标签
1
2
3
4
5
| .divtagABS {
position: absolute;
margin-left: auto;
margin-right:auto;
} |
左边距和右边距无效
但是如果你有亲戚，那很好
即
1
2
3
4
5
| ,divtagREL {
position: relative;
margin-left: auto;
margin-right:auto;
} |
这是为什么？ 我只想将元素居中
有人可以解释为什么将边距设置为绝对位置自动不起作用吗？
-
只需使用margin: auto;。 如果使用绝对位置，则忽略所有其他样式元素(关于位置等)。
-
将其包装在标记中，并将.divtagABS的宽度设置为100％。
-
我可以确认：即使有人说此语句已过时，我也注意到IE Edge上position: absolute;的不居中失败。
编辑：这个答案曾经声称不可能用margin: auto;将绝对定位的元素居中，但这根本不是事实。因为这是最受好评和接受的答案，所以我想我只是将其更改为正确的答案。
当您将以下CSS应用于元素时
1
2
3
4
5
6
| position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto; |
然后为元素提供固定的宽度和高度，例如200px或40％，元素将自动居中。
这是演示效果的小提琴。
-
网址：vision.to/articles/margins-and-absolute-positioning.php无法正常工作，请替换
-
由Wayback机器提供：web.archive.org/web/20130117135705/http：//www.vision.to/
-
"位置绝对值的元素不能居中..."实际上，这不是正确的：关键是将所有topbottomleftright属性设置为0并声明width和height，然后margin: auto将自动将绝对定位的元素居中。参见：绝对定心技术；它也在《粉碎杂志》上。
-
为了使宽度为伪动态，请使用width: 100%;和(即)max-width: 500px;。
-
是的，您需要添加width: 100%使其与edge和IE9-11一起使用。
-
我认为您只需要将其左，右和(max)宽度设置为居中，就不需要水平对齐了底部或顶部。尽管为了最佳实践，您应该至少设置其中之一，以便浏览器不会误解
我已使用此技巧将绝对定位的元素居中。但是，您必须知道元素的宽度。
1
2
3
4
5
6
| .divtagABS {
width: 100px;
position: absolute;
left: 50%;
margin-left: -50px;
} |
基本上，您使用left：50％，然后以负宽度将其退回一半宽度。
-
是的，如果元素的宽度固定，则应使用此方法。
-
辉煌。谢谢这个
-
您可以使用margin-left：-25％;将其居中而不是对数字进行硬编码。
-
@AaronHarun-可悲的是，没有，它不会按您期望的方式工作。我认为25％将基于父母的宽度。我设置了一支代码笔进行测试：codepen.io/chippper/pen/xwKIl-您可以切换CSS的最后一行以了解我的意思。
-
这触发了我类似的技巧，但使用了margin-left: -50%;。奇怪的是，它为我解决了一个非常奇怪的对齐问题！
-
@chipcullen @AaronHarun可以使用transform: translateX(-25%)，它使用自己的宽度。 stackoverflow.com/a/35723851/2054731(如您所述，@ chipcullen，width: -25%将使用父元素的宽度，通常不是您想要的宽度。)
-
@ArneHugo-我认为这就是先前的评论所暗示的内容。在我写这个答案的时候，转换没有得到很好的支持-幸运的是，它已经改变了！ :)
-
max-width也可以正常工作。因此它足够灵活。
如果绝对元素具有宽度，则可以使用以下代码
1
2
3
4
5
6
7
| .divtagABS{
width:300px;
positon:absolute;
left:0;
right:0;
margin:0 auto;
} |
-
太棒了！但是，如果不设置左右，为什么它不起作用？
-
非常好的解决方案。也可以在Bootstrap下使用width：100％;)
-
如果要使其垂直和水平居中，则将其扩展到顶部：0;底部：0结合CSS 3过渡的宽度和高度，您将获得不错的效果
-
我认为这是绝对居中技术的水平情况(另请参见：Smashing Magazine)，它同时使用margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;(声明为width和height)进行水平和垂直居中。链接的文章介绍了此方法的工作原理，并将其与其他居中方法进行了比较。
-
@geoffroy，因为默认将left，right，top和bottom设置为auto，并且这与绝对布局一起实际上防止了margin: auto引人注目
在下面工作的JSFiddle。
当使用绝对位置时，margin: 0 auto将不起作用，但是您可以这样做(也可以缩放)：
1
2
| left: 50%;
transform: translateX(-50%); |
更新：工作中的JSFiddle
-
这是一个非常不错的CSS hack
-
绝对位置div的最佳工作，但当定位div的宽度大于父级宽度时，在IE10中存在一些问题... :(
我已经遇到了同样的问题，并且已经有了解决方案，可以完全定位容器(在您的情况下为.divtagABS容器)，然后将内容相对放置在其中(在您的情况下为.divtagABS)。
做完了！现在，您的.divtagABS的左边距和右边距AUTO都可以使用。
所有答案都只是建议的解决方案或解决方法。但是仍然没有得到以下问题的答案：为什么margin：auto与position：relative一起使用但对position：absolute却不起作用。
以下说明对我有帮助：
"对于绝对定位的元素，页边距几乎没有意义，因为此类元素已从正常流程中删除，因此它们无法推开页面上的任何其他元素。使用这样的页边距只能影响应用了页边距的元素的位置，没有其他元素。"
http://www.justskins.com/forums/css-margins-and-absolute-82168.html
如果元素是绝对位置，则它不是相对的，也不是相对于任何对象的引用-包括页面本身。因此margin: auto;无法确定中间位置。
使用left和top将其放置在何处可以明确地告知它。
您仍然可以使用javascript或类似工具以编程方式将其居中。
当您定义位置为absolute ly的分割样式时，它们指定边距是没有用的。因为它们不再位于常规DOM树中。
您可以使用float来完成技巧。
1
2
3
4
5
| .divtagABS {
float: left;
margin-left: auto;
margin-right:auto;
} |