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

78

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

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

左边距和右边距无效

但是，如果您有亲戚，它可以正常工作，即

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

这是为什么？我只想将元素居中

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

html css position

— 用户名
source

只是使用margin: auto;。如果使用绝对位置，则忽略所有其他样式元素（关于位置等）。

— hjpotter92

将其包装在<center>标记中，并将.divtagABS的宽度设置为100％。

— Chloe

我可以确认：即使有人说此声明已过时，但我注意到position: absolute;IE Edge上的不居中失败。

— WoodrowShigeru

152

编辑：这个答案曾经声称不可能用来将绝对定位的元素居中margin: auto;，但这不是真的。因为这是最受好评和接受的答案，所以我想我只是将其更改为正确。

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

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

然后为元素提供固定的宽度和高度，例如200px或40％，元素将自动居中。

这是演示效果的小提琴。

— 凯文·鲍索克斯
source

3

网址：vision.to/articles/margins-and-absolute-positioning.php无法正常工作，请替换

— chrmod 2013年

2

“具有绝对位置的元素无法居中...”实际上，这不是正确的：关键是将所有top/bottom/left/right属性设置为，0并声明width和height，然后margin: auto将使绝对位置的元素自动居中。请参阅：绝对居中技术；它也在Smashing Magazine上。

— DynamicDispatch

2

为了使宽度为伪动态，请使用width: 100%;和（即）max-width: 500px;。

— WoodrowShigeru

1

是的，您需要添加width: 100%使其与Edge和IE9-11一起使用。

— Huelfe '17

1

我认为您只需要将其左，右和（max）宽度设置为居中，就无需将底部或顶部进行水平对齐。尽管为了最佳实践，您应该至少设置其中之一，以使浏览器不会误解

— Empi

67

我已使用此技巧使绝对定位的元素居中。但是，您必须知道元素的宽度。

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

基本上，您使用left：50％，然后以负宽度将其退回一半宽度。

— Chipcullen
source

是的，如果元素的宽度固定，则应使用此方法。

— Bantros

辉煌。谢谢你

— treeface 2013年

您可以使用margin-left：-25％; 将其居中而不是对数字进行硬编码。

— 亚伦·哈伦

4

@AaronHarun-可悲的是，没有，它不会按您期望的方式工作。我认为25％将基于父母的宽度。我设置了一支代码笔进行测试：codepen.io/chippper/pen/xwKIl- 您可以切换CSS的最后一行以了解我的意思。

— Chipcullen 2013年

这触发了我一个类似的窍门，但使用margin-left: -50%;。奇怪的是，它为我解决了一个非常奇怪的对齐问题！

— cregox

38

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

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

— 吉尔伯特·孙
source

太棒了！但是，除非设置左右，为什么它不起作用？

— geoffroy 2014年

1

非常好的解决方案。也可以使用width：100％在Bootstrap下工作；）

— Andrei Hardau 2014年

如果要使其垂直和水平居中，则将其扩展到顶部：0; 底部：0 结合CSS 3过渡的宽度和高度，您将获得非常不错的效果

— Daniel Worthington-Bodart 2014年

我认为这是“绝对居中”技术（也称为：Smashing Magazine）的水平案例，该技术同时使用margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;（带有声明的width和height）进行水平和垂直居中。链接的文章介绍了此方法的工作原理，并将其与其他居中方法进行了比较。

— DynamicDispatch

@geoffroy因为left，right，top，和bottom被设置好的，以auto在默认情况下，这与绝对布局在一起，实际上防止margin: auto是明显的

— asdru

16

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

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

更新：工作中的JSFiddle

— 烤半
source

3

这是一个非常不错的CSS hack

— Dinesh Patra

绝对位置div的最佳工作，但当div的宽度大于父级宽度时，在IE10中存在一些问题... :(

— iTux

1

我已经遇到了同样的问题，并且已经有了解决方案，可以绝对定位容器（在您的情况下为.divtagABS容器），然后相对于其中的内容（在您的情况下为.divtagABS）。

做完了！现在，.divtagABS的左边距和右边距AUTO可以使用。

— 拉斐尔·卡玛戈（Rafael Camargo）
source

1

所有答案都只是建议的解决方案或解决方法。但是仍然没有得到这个问题的答案：margin：auto为什么与position：relative一起使用而对position：absolute不起作用。

以下说明对我有帮助：

“对于绝对定位的元素，页边距几乎没有意义，因为此类元素已从正常流程中删除，因此它们无法推开页面上的任何其他元素。使用这样的页边距只会影响应用了页边距的元素的位置，没有其他元素。” http://www.justskins.com/forums/css-margins-and-absolute-82168.html

— 亚历克斯·沃夫丘克（Alex Vovchuk）
source

-1

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

它的等待被明确地告知，使用left以及top在哪里放置。

您仍然可以使用javascript或类似工具以编程方式将其居中。

— 编解码器
source

-4

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

您可以使用float来完成技巧。

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

— 斯塔克斯
source