CSS Help Needed (centering an object h&v)

[zymic]

Hello,

I need to know how to do something similar to the light box script (but just one part of it).

When you click a link, a box appears horizontally and vertically centered on the screen, above all the content (z-index) and then the transparency of the screen changing.

http://www.huddletogether.com/projects/lightbox/

I do not need all the extras like light box has, just a simple click and a box appears centered on the screen like said.

How would I go about this?

Thanks

[kefeso]

What you need is a simply centering hack like this:
xhtml:

<div id="center">
</div>

css:

#center{
position: absolute;
left: 50%;
top: 50%;
margin-left: -half of the div's width;
margin-top: -half of the div's height;
}

In this script, the left and top 50% is easy to understand, because it's aimed at locating the center of the page. However, this way the left-top corner would start from the center of the page, making it misaligned again. So the fix to that is to set a margin for both left and top of that div the value of half the negative height and width to set the center of the page located exactly the center of the div to create a perfectly centered div.

[zymic]

thanks, i'll give it a go.