Transparent divs, centering CSS

Transparent Div

filter: alpha(opacity=55);

-moz-opacity: .55;

background-color:#AAA;

opacity: 0.55;

Transparent floating div

Note we had a problem getting a background image to display on div

div#overlay {

filter: alpha(opacity=55);

-moz-opacity: .55;

background-color:#AAA;

opacity: 0.55;

position:absolute;

top:200;

left:100;

width: 500px;

height: 260px;

z-index:1;

}

Finally to make an image centered in div (absolutely

div#overlay img{

margin: 120px;

top: 400px;}

HTML

<div id="overlay">

<img src="${ctx}/img/wait30.gif" /> <div>

JQuery Centre, even when scrolling

jQuery.fn.center = function () {

this.css("position","absolute");

this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");

this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");

return this;

}

or

jQuery.fn.center = function () {

this.css("position","absolute");

this.css("top", ( $(window).height() - this.outerHeight() ) / 2+$(window).scrollTop() + "px");

this.css("left", ( $(window).width() - this.outerWidth() ) / 2+$(window).scrollLeft() + "px");

return this;

}

then user jQuery(element).center();

http://stackoverflow.com/questions/210717/what-is-the-best-way-to-center-a-div-on-the-screen-using-jquery