Centering with CSS

How do you go about centering something with CSS? I would like to center the
item vertically and horizontally. I searched around found some solutions but
they don’t seem to work.

One was to use:
top: 50%;
left: 50%;

Those make the item go off of the screen.

Another one used something like center center.

I am using a linked style sheet it is for www.sychosly.com it is probably a
simple solution but I am having difficulties. The two items are #logo and
#disclaimer, Thanks for any help.:

body {
color: #484848;
margin: 0px;
padding: px;
line-height: 15px;
font-size: 11px;
font-family: tahoma, verdana
}

#logo {
position: absolute;
top: 25%;
left: 3%;
}

#disclaimer {
position: relative;
top: 70%;
left: 28%;
width: 40%;
padding-left: 5px;
padding-top: 1px;
padding-bottom: 1px;
text-align: center;
border-top: 1px solid;
border-bottom: 1px solid;
background-color: #000000;
}

Re: Centering with CSS

Horizontal centering is fairly easy, just use:
margin-left: auto;
margin-right: auto;

That should place an equal amount of space on either side of the item
(works in all major browsers)

Vertical centering is a problem though. There is no clean way to do it
that will work in all browsers without using DHTML hacks. Check out
http://cross-browser.com/ for a decent DHTML JS Library which might be
able to help you out. I have used this library before on our company
site (not to center, but to keep two divs the same height) and it does a
pretty good job in Version 4+ browsers on Windows, MacOSX, and other *nixes.


Josh Kritner

Re: Centering with CSS

“Josh Kritner” <solsysNO@SPAMillusionmasters.com> wrote in message
news:bu56jv$253$1@server1.darklock.com
> Horizontal centering is fairly easy, just use:
> margin-left: auto;
> margin-right: auto;

I tried using that, but it doesn’t align it in the center. Everything just
moves to the left. The vertical positioning still stays but the horizontal
positioning doesn’t work. Any ideas why this would be happening? Is there
something wrong with the CSS file?