...

View Full Version : Vertically align a div in the page



tylerjca
02-06-2007, 02:46 AM
Hi, I'm trying to get a div..


body{
height: 100%;
text-align: center;
}

div.main{
width: 700px;
height: 400px;
}

..to vertically center within the page.
in other words, I need it dead center on the page!

is this possible?

Thanks in advance
-Tyler

Sman5109
02-06-2007, 02:51 AM
Try to add:


margin: 0px auto 0px auto;

to the css of the div

Excavator
02-06-2007, 03:38 AM
Hello tylerjca,
Sman's code will center your site horizontally (it can be shortened to margin: 0 auto; usually too).

To center if vertically is a little different.



#layerwhatever {
position: relative;
top: 50%;
margin-top: -???px; /* replace the ??? with half the height of the div, ex: 200px high would be 100px */
margin: 0 auto;
}

eXquisition
02-06-2007, 04:06 AM
this will work as well. pretty much the same thing but I had to post because I wrote a big long one and it was taking forever to upload so I lost it. Meantime somebody else answered your question :)



div.main
{
position:absolute;
width: 700px;
height: 400px;
margin-top: -200px;
top: 50%;
}

rmedek
02-06-2007, 05:26 PM
Try this method; it's the best I've seen so far:

http://exanimo.com/css/vertical-centering-with-a-floated-shim



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum