如何在IE 9,10,11中居中“position：absolute”元素

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中居中“position：absolute”元素，我的例子在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>

5 个解决方案

#1

<body>
<div class="container">
<div class="box">
</div>
</div>
</body>

CSS

CSS

.box{
    position: absolute;
    top:0;
    right: 0;   
    left: 0;
    bottom:0;   //specify all including bottom:0
    margin: auto;
    height:200px;
    width:200px;       
}

DEMO

DEMO

#2

Just give it a fixed width and height and remove top:150px

只需给它一个固定的宽度和高度，然后移除顶部：150px

#3

It works fine here Jsfiddle

它在Jsfiddle工作正常

.box{
position: absolute;
top: 150px;
right: 0;   
left: 0;
margin: auto;   
border: 2px solid red;    
width: 50px;
height: 50px;
}

#4

I just struggled with this myself, and the specific key for me was changing the max-width property to be a width property. Adding a max-width doesn't break it, but it relies on the width property in IE, apparently, where in Firefox it worked with just the max-width set.

我自己也只是苦苦挣扎，而我的具体关键是将max-width属性更改为width属性。添加最大宽度不会破坏它，但它依赖于IE中的width属性，显然，在Firefox中它只使用最大宽度设置。

I hope this helps someone else!

我希望这可以帮助别人！

#5

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.

但是，如果要垂直居中元素，则需要将bottom属性与top和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.

如果你的元素只是水平居中，“bottom”设置为0，那么代码中就会出现一些冲突，迫使你使用该属性。我之前在Bootstraps生态系统中看到过这种情况，当时没有应用容器的正确层次结构 - >行等等。

#1

<body>
<div class="container">
<div class="box">
</div>
</div>
</body>