Vertically centering child div in parent container with JavaScript on page load is not setting position?
<p>I am using JavaScript to vertically center a child div within a fluid container. I essentially accomplish this by calculating the height of the parent container and the height of the child div. I then absolutely positon the child div in the center of the parent div based on the height. The issue I am experiencing is that when the page loads, it does not set the position of the child div. I created a function out of this and call it when the window is resized so that when the viewport changes it recalculates dynamically. How would I go about initially setting this position on page load? </p>

<pre><code>&lt;div class="lead"&gt;
    &lt;div class="message"&gt;&lt;/div&gt;
&lt;/div&gt;

var homepageLead = function () {
var lead = $('.lead'),
    message = $('.message'),
    lead_height = lead.height(),
    message_height = message.height(),
    lead_center = .5 * lead_height,
    message_center = .5 * message_height,
    center = (lead_center - message_center);    
message.css('bottom',center);
}
homepageLead();

$(window).resize(function () {
    homepageLead();
});
</code></pre>
