jQuery vertical center appearing differently on first page load? Help!

[mr_goosey]

Hello all,

I've used a jQuery script I found to vertically center some content on a page I'm designing.

http://thecloveclub.com/new/index.html

It works fine on all of the pages apart from the main index linked above. On first load, and even if refreshed, it's not quite centered. However, if I browse to another sub-page, and then click the "home" icon, it centers perfectly.

Does anyone have any ideas what might cause this?

Cheers
MRG

[Ron Roe]

Probably has to do with the script. A much easier way would be to take the height of the div in px, divide that by half, then do like so:

div{
height:##px; /*height of the div*/
width:##px; /*width of the div*/
position:relative;
top:50%;
margin-top:-##px; /*negative half the height of the div*/
}

It's essentially the same thing the script is trying to do automatically, but somehow failing at.

[ralph.m]

The home page looks centered to me, but you have different HTML/CSS for the home page. The home content are in a div called #content_index, while other pages have #content as the content wrapper.

[Frank S]

A much easier way would be to take the height of the div in px, divide that by half, then do like so: (etc.)

That's indeed a technique that one can use quite often. But not always, because the height of the to center object must be known and set. That is not always the case. And sometimes there are simpler techniques. For all five -- intuitive and valid -- techniques, including a flowchart to determine which technique must or can be used, see the tutorial Vertical Centering in CSS.

One indeed does not need javascript to center elements or text, and certainly no jQuery.