css - Center div on screen, doesn't work on IE11 but it does in Firefox -


with css, i'm trying center div wrapper on screen. works on mozilla doesn't work on ie 11. don't know why. web page running in 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. see, div centered on screen: enter image description here

image of web page in ie11. see, div not centered on screen:

enter image description here

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 , works in ie11.

to explain code: place div on 50% of body width minus 625px (half of width of div) inside body tag, width 100% of browser width.


Comments

Post a Comment