CSS 如何在 IE 9,10,11 中将“位置：绝对”元素居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22654528/
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
How to center a “position: absolute” element in IE 9,10,11
提问by user3351236
How to center a “position: absolute” element in IE 9, 10, 11, my example do not work in Internet Explorer. Also this "position: absolute; left:50%; margin-left:-20px;" ,manner will not suit me, as the layout is responsive.
如何在 IE 9、10、11 中将“位置：绝对”元素居中，我的示例在 Internet Explorer 中不起作用。还有这个“位置：绝对；左：50%；左边距：-20px；” ，方式不适合我，因为布局是响应式的。
.box{
position: absolute;
top: 150px;
right: 0;
left: 0;
margin: auto;
}
<body>
<div class="container">
<div class="box">
</div>
</div>
</body>
回答by Sajad Karuthedath
回答by Karim AG
Just give it a fixed width and height and remove top:150px
只需给它一个固定的宽度和高度并删除 top:150px
回答by Sean Kendle
I just struggled with this myself, and the specific key for me was changing the max-widthproperty to be a widthproperty. Adding a max-width doesn't break it, but it relies on the widthproperty in IE, apparently, where in Firefox it worked with just the max-width set.
我自己也在为此苦苦挣扎，对我来说，具体的关键是将max-width财产更改为width财产。添加 max-width 不会破坏它，但它依赖width于 IE 中的属性，显然，在 Firefox 中它只使用 max-width 集。
I hope this helps someone else!
我希望这对其他人有帮助！
回答by Selvamani
回答by TrevorGee4
You shouldn't have to set a bottom property (even in IE), to center that element horizontally.
你不应该设置一个底部属性（即使在 IE 中），以水平居中该元素。
However, if you wanted to vertically center the element, you would need the bottom property in conjunction with an auto margin for top and bottom.
但是，如果您想垂直居中元素，则需要将底部属性与顶部和底部的自动边距结合使用。
If your element will only center horizontally with "bottom" set to 0, then there is something conflicting in your code forcing you to use that property. I have seen this happen before in Bootstraps Ecosystem when not applying the proper hierarchy of container --> row and so on.
如果您的元素仅水平居中且“底部”设置为 0，则您的代码中存在冲突，迫使您使用该属性。我之前在 Bootstraps 生态系统中看到过这种情况，当时没有应用正确的容器层次结构 --> 行等等。
