在屏幕上居中分区，在IE11上不起作用，但在火狐上起作用

Question

使用css，我试图在屏幕上居中显示div包装器。它可以在Mozilla上运行，但不能在IE11上运行，我不知道为什么。我的网页在Windows Server 2008上运行。

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：

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

Mozilla中网页的图像。如你所见，div在屏幕上居中：

​

IE11格式的网页图像。如您所见，div在屏幕上并不居中：

​

​

Answer 1

试试这个：

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标签中，这个标签的宽度是浏览器宽度的100%，而body标签的宽度是body宽度的50%减去625px (div宽度的一半)。