如何在IE-11中将div保持在页面的中心？

Question

我想在我的页面中间保留一个div，它在google上运行得很好，但是当我在IE-11中打开同样的div时，它不对中，它会出现在左上角(完整的div)。

注：

它在本地服务器上工作正常(例如。但是当我把它托管到web服务器上时，只有这个问题才会出现。当我移除的位置时:固定/绝对的有点工作，但不像预期的那样。

如果我可以添加一些position:fixed/absolute，那么它就可以了。请协助

这是css代码

border: 2px solid #1E90FF;
position: absolute;
height:400px;
width:450px;
top: 0;
bottom: 0;
left: 0; 
right: 0;
margin: auto;

Answer 1

如果你不使用空白处，那就容易多了。垂直对齐是你应该依赖的流体高度垂直对中。

HTML

<span></span><div id="any-height"></div>

CSS

* { margin: 0; padding: 0; }
html, body { 
    height: 100%;
    text-align: center; }
span { 
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
#any-height { 
    background: #000;
    text-align: left;
    width: 200px;
    height: 200px;
    vertical-align: middle;
    display: inline-block; }

小提琴

我很确定这在所有主流浏览器中都能使用，如果您要寻找扩展兼容性，您应该检查此链接

Answer 2

在一个例子中，我使用以下属性解决了IE中元素的居中问题。我在IE的媒体查询中添加了代码，因为基本应用程序是在flexbox模型中定义的，对IE中的中心化造成了干扰。您可以使用这段代码。

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
body { 
    height: 100%;
    overflow-x: hidden;
  }
 #any-height {
     background: #000;     
     display: block;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: left;
     width: 200px;
     height: 200px;     
    }
  }