Click to See Complete Forum and Search --> : Finding the Absolute Center -
sorciere
08-22-2003, 10:43 PM
Hello. What would the CSS look like to center contents of an entire webpage in the absolute center of the browser window no matter what the browser window is sized to?
For example, how would I place the contents of:
http://simplisticallycomplicated.biz/finalsite/index.html
perfectly in the center of the screen height and width wise?
sorciere
08-22-2003, 11:01 PM
perhaps I'm looking for the relative center --
You need to play around with positioning and margins: http://www.infinitypages.com/research/verticalcentereddiv.htm
sorciere
08-23-2003, 12:12 AM
How come the script:
#location {
position: absolute;
top: 55%;
}
is not working to position all the contents in the center from the top?
<body>
<div id="location">
entire contents
</div>
Because it positions the top of the div (<div id="location">) at 55% from the top. You need to specify the height of the div, position at top: 50% and use negative margins, as shown in the example page above.
Hello!
I got a similar problem! I need my layer to appear in the center (50%) + 200px to be exact!
How do I do that?
Did you look at my research page that I linked to above? The code for that is really quite simple. Just go to the page, and view the source.
I did but it doesnt help...
You see, I got this layer floating over everything else on my page. Now my main table is centered and I want the layer to have a specific position, but when you edit the window size the layers position changes...
Now, i belive that if I can get the half window size (wich is Left: 50%) + add an extra 200px then I will get the exakt position where I want my layer to appear on, disregard of the window width-size!!
But I cant just write Left: 50%+200px because I get an error...
Help? :)
May we see some code, please?
I think i fixed it using the margin-left... but its still not perfect... +-1px
<div id="Layer1" align="justify" style="position:absolute; top: 209px; margin-left: +244px; width: 181px; height: 238px; left: 50%>Hello World</div>
It is one pixel off because the width of the div is an odd number of pixels, and therefore, can not be exactly centered.
Also, your code should look like this:
<div id="Layer1" align="justify" style="position:absolute; top: 50%; left: 50%; width: 181px; height: 238px; margin-left: -90px; margin-top: -119px; border: 1px solid;">Hello World</div>
Note that I added a border so you could see what it is doing.