neophyte - 11:52 am on May 20, 2012 (gmt 0)

Hello All -

I've been all over the web to solve this problem - and have tried nearly everything I've found - but still can't get one fixed-position div to center inside the other.

This is for an ajax "loading" animation.

So, I've got two divs: 1 full viewport opacity "mask" div and 1 container div which holds the animated .gif and a <p></p> tag pair.

The "container" div (the one with the animation and the <p> pair) IS NOT a child of the "opacity mask" div because, if it is, the "container" will pick up the opacity from the parent which I don't want.

With the code and css shown below, I've come close... but I've got to use top and left MARGIN percentages which kinda works but isn't perfect.

Maybe (hopefully) somebody can find the error of my ways.

Great thanks in advance to all.

Here's the html:

******************************************************

// SEMI TRANSPARENT OVERLAY
<div id="loading_overlay">
</div>

// CREATE THE ACTUAL LOADING CONTAINER
<div id="loading_container">
<img id="loading_animation" src="assets/ajax/loading/ajax-loader(3).gif" />
<p id="loading_message">&nbsp;</p>
</div>

Here's the css:

******************************************************

div#loading_overlay {
position: fixed;
top: 0;
left: 0;
z-index: 4000;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
filter: alpha(opacity=50);
}

div#loading_container {
position: fixed;
margin-top: 30%;
margin-left: 45%;
z-index: 5000;
}

img#loading_animation {
display: block;
margin: 0 auto;
}

p#loading_message {
text-align: center;
margin-top: 10px;
padding: 5px 0 7px 0;
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
color: #FFF;
font-weight: bold;
font-family: Verdana, Geneva, sans-serif;
}