How To Vertically Center A Site

http://webdesignpond.co.uk/wdp/tips-tutorials/how-to-vertically-center-a-site/

 

Next comes the part of code that will center the site:

view source

print?

01	#vertical {
02	height:50%;

 

03	width:1px;
04	margin-bottom:-150px; /* half the wrappers height */

 

05	float:left;
06	}

 

07	#wrapper {
08	margin:0 auto; /* use if centering horizontally  */

 

09	text-align:left; /* set text back to default if centering horizontally  */
10	position:relative;

 

11	height:300px;
12	width:700px;

 

13	clear:left;
14	}

This works by setting the height of the vertical div to 50% minus half the size of the wrappers height, by floating this to the left and then using the clear:left; within the wrapper, the wrapper div is then pushed down underneath the vertical div, causing it to be vertically centered.

Step Two – The HTML

view source

print?

1	<div id="vertical"></div>
2	<div id="wrapper">

 

3	<!-- Place content here-->
4	</div>

There you have it a vertically centered site.