0

With css, I'm trying to center div Wrapper on screen. It works on Mozilla but it doesn't work on IE 11. I don't know why. My web page is running in a 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>

Image of web page in Mozilla. As you see, div is centered on screen: enter image description here

Image of web page in IE11. As you see, div is NOT centered on screen:

enter image description here

Delmonte
  • 411
  • 2
  • 9
  • 33

1 Answers1

-1

try this:

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

EDIT: I've tested it and it works in IE11.

To explain the code: it will place your div on 50% of the body width minus 625px (half of the width of the div) inside the body tag, which width is 100% of the browser width.

Orry
  • 659
  • 6
  • 21
  • You should explain your answer and why it's a solution. – Rob Sep 25 '15 at 23:03
  • @Orry: I have tried your code, but got the same result. Instead of 50px I changed it to 1250px. Instead of 25px, I changed it to 625px. Could be some config with the server? In my PC it works ok. – Delmonte Sep 25 '15 at 23:06
  • I don't think this would be a bad server configuration because this is rendered browser side. Maybe this will help: http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers – Orry Sep 25 '15 at 23:26