Question

我想在我的页面中心保留一个div，它与谷歌浏览器工作正常，但是当我在IE-11中打开它时它不对齐到中心，它会到达左上角（完整格）。

注意：

它与本地服务器（例如Dreamweaver + Xampp）一起正常工作，但是当我将它托管到Web服务器时，只有这个问题才会出现。当我删除位置：固定/绝对时，它的工作有点但不如预期。

如果我可以添加位置：固定/绝对，那么它就可以了。请协助

这是css代码

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

Answer 1

在一个实例中，我通过使用以下属性解决了在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;     
    }
  }

Answer 2

如果你不使用边距，那就容易多了。垂直对齐是您应该依赖的流体高度垂直定心。

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; }

jsfiddle

我很确定这适用于所有主流浏览器，如果您正在寻找扩展兼容性，那么您应该检查一下 this link

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

2 个答案: