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">
<p>
<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.
</p>
</div>

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;
background-color:#efefef;
padding:10px;
border:1px solid #ccc
}
</Style>

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

5 comments

  1. jdwolf   •  

    why not just do this….

    {position:absolute: top:50%; margin-right:auto; margin-left:auto; margin-top:-[HALF.THE.HEIGHT.OF.YOUR.DIV]px;}

  2. HPadmin   •     Author

    @jdwolf,
    For this Style you should fix height of your main DIV. simply it will not works if your DIV height is not fix.

  3. JohnCrummay   •  

    I have tried your instructions above and do not have any success with either creating my own page or copying yours exactly. Though the div is centered horizontally it is not vertically. I am a total beginner at this so I am sure I am doing something very obvious wrong but I just can’t work it out.

  4. Grego   •  

    Excellent article, works perfect!
    One question, if i was to have a website footer outside and below the middle aligned container, how would i go about doing that?
    I tried making a absolute positioned footer with bottom: 0; which works, but when viewing on small res screens the footer flows into the content container!

  5. HPadmin   •     Author

    Hi Grego,

    Try “position:fixed; bottom:0px;” in footer DIV. it may solve your floating div issue.

Comments are closed.