Set Website Position Vertically Middle

To set website vertically middle with valid W3C standard is a headache for every XHTML coder, It becomes really hard when there is no fix height of layout.

All we knows that for horizontally center website we generally use “margin: auto;” in CSS style. But for vertically middle alignment there is no such CSS style. Using small code of JavaScript we can easily fix issue of vertically middle alignment of website. And best thing about that is we don’t have to fix height of main DIV.

Tutorial how to make website vertically Middle

HTML Code:
Simple create a DIV with ID “content”. That ID will use in JavaScript, so it is very important that main DIV ID will same as ID used in JavaScript.
<div id="content">
<strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</strong><br /> <br /> Quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

CSS Code:
Create a CSS style to Main DIV with same class name as used as DIV ID.
#content {
position: relative; /* Needed for Safari */
margin: auto; /* Takes care of horizontal alignment in standards compliant browsers */
width: 700px;
border:1px solid #ccc

Once you done with both above you can preview your HTML page in browser, it will be horizontally center but vertically top by default. It will look like below screen.

Now you need to include small JavaScript code with makes website vertically middle.

Include JavaScript:

<script type="text/javascript" src="middle.js"></script>

Once you include JavaScript, Main DIV will be vertically middle now, Just like below Screenshot

Live Demo | Download