Search code examples
htmlcssinternet-explorerconditional-comments

Alternative to IE 10 Conditional Comments to center positioned div


I use this code to center absolutely positioned div

.class{
   width: 10px; 
   height:10px; 
   position:absolute;
   left:0;
   right:0;
   top:0; 
   bottom:0; 
   margin:auto
}

This is not working in IE 10 and lower versions, but I dont want to change this code as it's comfortable for all other browsers and devices.

I know that Conditional comments are not working in IE 10 too, so how can I solve this issue there?


Solution

  • You have besides those options mentioned above:

    Calculated Padding + Width:

    .container {
      padding:5%;
    }
    .container .center{
      width:90%;
      height:90%;
      display:block;
    }
    

    Or if you only need it to be horizontally centered:

    .centered {
      width:80%;
      margin:0 auto;
    }
    

    But if you still aren't getting any results to work, then you may have malformed HTML. When internet explorer finds bad HTML or a meta tag expressing a specific version to emulate, it will and then newer features don't work. I recreated your style on JSFIDDLE and it worked for me even on internet explorer 8 (Although 7 did fail). Otherwise you may not be putting a position value on the CSS of the parent element if it is apearing out of place.