中心div在屏幕上，不工作在IE11上，但它在Firefox中工作

问题描述：

使用CSS，我试图将div Wrapper放在屏幕上。它适用于Mozilla，但它不适用于IE 11.我不知道为什么。我的网页是在Windows Server 2008上运行中心div在屏幕上，不工作在IE11上，但它在Firefox中工作

CSS

div#wrapper 
    {  
    width: 1250px; 
    min-width:1250px; 
    max-width:1250px;  
    position: absolute;   
    top: 0; 
    left: 0; 
    right: 0;   
    bottom:0;     
    margin-left: auto; 
    margin-right: auto; 
    margin: auto; 
    border: 2px solid red; 

    }

ASPX：网页在Mozilla

<head runat="server"> 
    <title></title> 
    <link href="Styles/Site.css" type="text/css" rel="stylesheet" /> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div id="wrapper"> 
     HELLO 
     <br /> 
     <asp:Button ID="Button1" runat="server" Text="Button" /> 
    </div> 

    </form> 
</body>

图像。如您所见，div在屏幕中居中：

IE11中的网页图像。正如你看到的，DIV是不是在屏幕居中：

你应该在IE11中工作。可能还有其他相互冲突的风格。 –

答

试试这个：

body 
{ 
    width:100%; 
    height: 100%; 
} 

div#wrapper 
{  
    width: 1250px; 
    min-width: 1250px; 
    max-width: 1250px;  
    position: absolute;   
    top:0; 
    bottom:0; 
    left: calc(50% - 625px);  
    border: 2px solid red; 
}

编辑：我测试，它在IE11的作品。

解释代码：它会将div放在body标签内部的身体宽度减去625px（div宽度的一半）的50％处，该宽度是浏览器宽度的100％。

你应该解释你的答案，为什么这是一个解决方案。 – Rob

@Orry：我试过你的代码，但得到了相同的结果。我将其改为1250px，而不是50px。而不是25px，我将其更改为625px。可能是与服务器的一些配置？在我的电脑中，它工作正常。 – Delmonte

我不认为这将是一个糟糕的服务器配置，因为这是呈现浏览器端。也许这将有助于：http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers –

中心div在屏幕上，不工作在IE11上，但它在Firefox中工作

相关推荐