Html css 绝对位置不适用于 margin-left:auto margin-right: auto
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9998260/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css absolute position won't work with margin-left:auto margin-right: auto
提问by user1118019
Say you have the following css applied to a div tag
假设您将以下 css 应用于 div 标签
.divtagABS {
position: absolute;
margin-left: auto;
margin-right:auto;
}
the margin-left and margin-right does not take effect
margin-left 和 margin-right 不生效
but if you have relative, it works fine i.e.
但如果你有亲戚，它工作正常，即
,divtagREL {
position: relative;
margin-left: auto;
margin-right:auto;
}
why is that? i just want to center an element
这是为什么？我只想居中一个元素
can someone explain why setting margins to auto in absolute position does not work?
有人可以解释为什么在绝对位置将边距设置为自动不起作用吗？
回答by Kevin Bowersox
EDIT : this answer used to claim that it isn't possible to center an absolutely positioned element with margin: auto;, but this simply isn't true. Because this is the most up-voted and accepted answer, I guessed I'd just change it to be correct.
编辑：这个答案曾经声称不可能将绝对定位的元素与 居中margin: auto;，但这根本不是真的。因为这是投票最多和被接受的答案，所以我想我只是将其更改为正确的。
When you apply the following CSS to an element
当您将以下 CSS 应用于元素时
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
And then give the element a fixed width and height, such as 200px or 40%, the element willcenter itself.
然后给元素一个固定的宽度和高度，比如 200px 或 40%，元素将自己居中。
Here's a Fiddlethat demonstrates the effect.
回答by chipcullen
I've used this trick to center an absolutely positioned element. Though, you have to know the element's width.
我已经使用这个技巧将绝对定位的元素居中。但是，您必须知道元素的宽度。
.divtagABS {
width: 100px;
position: absolute;
left: 50%;
margin-left: -50px;
}
Basically, you use left: 50%, then back it out half of it's width with a negative margin.
基本上，您使用 left: 50%，然后将其宽度的一半以负边距退回。
回答by GilbertSun
if the absolute element has a width,you can use the code below
如果绝对元素有宽度，你可以使用下面的代码
.divtagABS{
width:300px;
positon:absolute;
left:0;
right:0;
margin:0 auto;
}
回答by Baked Inhalf
回答by Rafael Camargo
I already had this same issue and I've got the solution writing a container (.divtagABS-container, in your case) absolutely positioned and then relatively positioning the content inside it (.divtagABS, in your case).
我已经遇到了同样的问题，我已经有了写一个容器（.divtagABS-container，在你的情况下）的解决方案，绝对定位然后相对定位其中的内容（.divtagABS，在你的情况下）。
Done! The margin-left and margin-right AUTO for your .divtagABS will now work.
完毕！.divtagABS 的 margin-left 和 margin-right AUTO 现在可以使用了。
回答by Alex Vovchuk
All answers were just a suggested solutions or workarounds. But still don't get answer to the question: why margin:auto works with position:relative but does not with position:absolute.
所有答案都只是建议的解决方案或解决方法。但仍然没有得到问题的答案：为什么 margin:auto 与 position:relative 一起工作，但不与 position:absolute 一起工作。
Following explanation was helpful for me:
以下解释对我有帮助：
"Margins make little sense on absolutely positioned elements since such elements are removed from the normal flow, thus they cannot push away any other elements on the page. Using margins like this can only affect the placement of the element to which the margin is applied, not any other element." http://www.justskins.com/forums/css-margins-and-absolute-82168.html
“对于绝对定位的元素，边距几乎没有意义，因为这些元素从正常流中删除，因此它们不能推开页面上的任何其他元素。使用这样的边距只会影响应用了边距的元素的位置，不是任何其他元素。” http://www.justskins.com/forums/css-margins-and-absolute-82168.html
回答by Codecraft
If the element is position absolutely, then it isn't relative, or in reference to any object - including the page itself. So margin: auto;can't decide where the middle is.
如果元素是绝对位置，则它不是相对的，也不是引用任何对象 - 包括页面本身。所以margin: auto;不能决定中间在哪里。
Its waiting to be told explicitly, using leftand topwhere to position itself.
它等待被明确告知，使用left和top定位自己。
You can still center it programatically, using javascript or somesuch.
您仍然可以使用 javascript 或其他方式以编程方式将其居中。
回答by Starx
When you are defining styles for division which is positioned absolutely, they specifying margins are useless. Because they are no longer inside the regular DOM tree.
当您为定位的划分定义样式时absolute，它们指定边距是无用的。因为它们不再在常规 DOM 树中。
You can use float to do the trick.
您可以使用浮动来解决问题。
.divtagABS {
float: left;
margin-left: auto;
margin-right:auto;
}
