Question

使用css，我试图将div Wrapper放在屏幕上。它适用于Mozilla，但它不适用于IE 11.我不知道为什么。我的网页在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标签内50％的体宽减去625px（div宽度的一半）内，宽度为浏览器宽度的100％。

屏幕上的中心div，不适用于IE11，但它在Firefox

1 个答案: