Keep Logo in Middle of Page when Resizing Page - html

Question

I have solutions that work in all browsers except IE, so I'd appreciate if the answers worked in IE.
<div id="content">
<div id="redBar"></div>
<div id="main">
<div id="header">
<img src="images/header.gif" id="logo1">
</div>
<div id="explanation">
Next div.
</div>
</div>
<div id="footer">
</div>
</div>
I guess I'll just give the CSS too:
#main
{
padding-left:229px;
padding-right:229px;
}
#logo1
{
width:auto;
z-index:1;
position: relative;
left:250px;
}
#main
{
//background-image:url('../images/indexBack.gif');
background-repeat:repeat-xy;
width:980px;
}

Answer 1

Well what you're trying to do is relatively simple but you're putting your logo nested in a few block elements that might mess it up because they don't have the necessary styling applied to them...
A visual image of the different areas would help but heres what I think you're trying to do. I am asuming you want the entire page centered too (if not then it is impossible with your current html).
(Also you defined the css class for #main twice)
<div id="content">
<div id="redBar"></div>
<div id="main">
<div id="header">
<img src="images/header.gif" />
</div>
<div id="explanation">
Next div.
</div>
</div>
<div id="footer">
</div>
</div>
<style>
#main
{
background-image:url('../images/indexBack.gif');
background-repeat:repeat-xy;
width: 980px;
margin: 0 auto;
}
#header img /* don't put un-needed ids on elements */
{
display:block; /* img is an inline element by default but we want it as a block so margin works */
margin: 0 auto;
}
</style>

Answer 2

If you know the dimensions of the logo then you can use absolute positioning. Lets say your logo is 200x100:
#logo1 {
position:absolute;
top:50%;
left:50%;
margin-top:-50px; /* half the logo height */
margin-left:-100px; /* half the logo width */
}
This does rather assume that your element's container fills the size of the screen too though.