Alternative to IE 10 Conditional Comments to center positioned div

Question

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?

Answer 1

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.

Answer 2

You should detect by JavaScript if the browser is IE10. If it is you can add a special class in the page body or in any html element you want.

JS

if (navigator.userAgent.indexOf("MSIE 10") > -1) {
    document.body.classList.add("ie10");
}

CSS

.ie10 {
    ...
}