How To Center An Absolutely Positioned Div Within Ie7?

UPDATED PROVIDING CONTEXT FOR THE LAYOUT I have a relatively simple structure for my page. The page is composed of two div's both absolutely positioned. One is centered within th

Solution 1:

Try this:

#protocol_index_body {
    width: 50px;
    margin: 0 auto 0 -25px;
    position: absolute;
    top: 0;
    left: 50%;
    right: 0;
    bottom: 0;
    background-color: red;
}

Or ...

#protocol_index_body {
    width: 50px;
    margin: 0 auto 050%;
    position: absolute;
    top: 0;
    left: -25px;
    right: 0;
    bottom: 0;
    background-color: red;
}

Solution 2:

Unless you need the parent div to have a fluid width (which would be a little silly when you're setting the child div's width), why not just set the parent div's width and add margin:0 auto?

Solution 3:

Okay I played around with it and this works identical in FF, Opera and IE7:

#protocol_index_body_wrapper {
  background-color:black;
  padding: 0020px0;
  position: absolute;
  top: 120px;
  left: 0px;
  right: 0px;
  bottom: 10px;
  text-align: center;
  width: 100%;
  height: 100%;
}
#protocol_index_body {
  width: 50px;
  margin: 0 auto;
  background-color: red;
  height: 100%;
}

Solution 4:

autoCenterAlign = function() {

    var bodyWidth = $("body").innerWidth();
    var protocolWidth = $("#protocol_index_body").innerWidth();
    if(protocolWidth < bodyWidth) {

        $("#protocol_index_body").css("left",((bodyWidth-protocolWidth)/2)+"px");

    }

}

window.onload = autoCenterAlign;
window.onresize = autoCenterAlign;
jQuery(window).load(function () { 

    autoCenterAlign()

});

Solution 5:

text-align:center to the wrapper, or <div align=center> (ugly, I know, but works)

or with JS:

document.getElementById("protocol_index_body_wrapper").style.marginRight = (document.body.clientWidth - 50)/2_+"px"

works only on IE6+.