div center does not work for IE

Question

Hello,

I have this css

position:relative;
margin: 0 auto;
top:50%;
width:15px;
height:15px;
background-color:#fff;
-moz-border-radius: 15px; 
-webkit-border-radius: 15px;
cursor:pointer;

Its centering fine on chrome and stays on top for IE and ff.

removed and changed position:

whats wrong here?

Thanks Jean

Answer 1

#div {
    position:relative;
    margin-left:-7.5px; // Half your width in negative
    margin-top:-7.5px; // Half your height in negative
    top:50%;
    left:50%;
    width:15px;
    height:15px;
    background-color:#fff;
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px;
    cursor:pointer;
}

This will work in all browsers. IE renderings can be awful with valid code, but this a tried and tested method for me for universal workings.

To edit this, simply change the negative margins values to match half the height, or width of your div element.

Answer 2

margin: 0 auto; for horizontal centering should work fine for IE6+, but only as long as you are in Standards Mode. Make sure you include a Standards Mode doctype in your HTML, or you'll fall into Quirks Mode, where nothing works properly.

To find out whether a particular page is in Standards Mode, enter javascript:alert(document.compatMode) into the address bar. CSS1Compat is good; BackCompat is Quirks.

For vertical centering without absolute-positioning, that top: 50% only makes sense if the parent element has an explicit height. So if you are intending to push the top down to half of the browser height, then you'll need to specify 100% height on each ancestor of the element, eg. at least:

html, body { height: 100%; }