For those of you looking for a way to absolutely center align a DIV using CSS only, and want to retain its fluidity, please see the following code:
#container {
position: absolute;
left: 50%;
top: 50%;
width:560px;
height:380px;
margin-left: -280px; /* MUST UPDATE TO MATCH HALF THE WIDTH */
margin-top: -190px; /* MUST UPDATE TO MATCH HALF THE HEIGHT */
}
4 Comments on "How to absolutely center align a DIV using CSS only, and remain fluid?"
The margin-top/left & width/height works with % as well.
If you wanted to center a div inside another element, you need to change position to
position: relative;
in order for the div to stay inside the element.
Thanks for the comment Jimmy - are you sure height % works in IE6 …?
Hmm… Doesnt seems to work in IE6. I tested it on IE7
But the initial script works for both.
Lucky we didn’t get anyone’s hopes up then…
The % Method is certainly an easy one to use (as it saves you from having to recalculate the margins each time you use the script), but if you want both IE6 and IE7 to work, one must avoid the use of percentages in height values…
Unless someone has some JS to fix the problem, in much the same way people did with PNGs, for if that was the case, we could then release a drag and drop script that can be used for any situation…
Comment Now!