centering

[acidglitter]

how can i put a div in the center of the screen? i'm using position:absolute so i can't just set the margin to auto

[jjmusicpro]

make a container and center that, then you can float a right, float center, float left.

[acidglitter]

couldn't i just do float:center on the div without the container?

[dbrimlow]

position:absolute is exactly that - no more no less - YOU tell it where to go regardless of the window ... it does not adjust with the rest of the page because position:absolute is OUTSIDE of the flow of your code markup flow..

 

Lose position:absolute. It is not a good layout tool.

 

Don't float or use "position", just give the div a width less than its container and use "margin: 0 auto"

[haku]

What he said!

[linstefoo]

I know this isn't way your talking about, but here is a way to position something horizontally and vertically center:

#div
{
    position: absolute;
    margin: -100px 0 0 -100px;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
}

[dbrimlow]

That will just make a mess of anything else on the page because position:absolute is greedy and ignores everything else.

 

Until you are an expert at css (not just "good enough", I'm talkin' you know it all cold) avoid position:absolute like the plague. It is NOT a "friendly" layout element and does NOT play well with others.

[acidglitter]

well i don't want this div to have anything to do with the rest of the page. its a temporary div that i want to show up in the middle of the screen, no matter if you're at the top of the page or have scrolled down to the middle.. so i was just setting the position to absolute, then the top position to a certain amount of pixels plus however many pixels away from the top of the page.. i guess instead of top it would work the same to set that to margin-top and then the other margins to auto (and then a high z-index)...

[dbrimlow]

i guess instead of top it would work the same to set that to margin-top and then the other margins to auto (and then a high z-index)...

 

As simple as that.

 

You don't even need the z-index if it isn't being "absolute-positioned".

 

#div
{
    margin:25% auto 0 auto;
    width: 200px;
    height: 200px;
}