I am currently utilizing jQuery to vertically center various elements on a webpage. Due to lack of support in older versions of IE, I cannot use the table-cell CSS statement. Therefore, I am using jQuery to calculate half of the height and then position it in the middle by applying a negative margin.
Everything works perfectly when I manually refresh the page by using the address bar. However, if I press the reload button, the calculated height is incorrect and ends up positioned too low. For instance, when the element's height is 863px, jQuery sets margin-top: -228.5px;
Thank you in advance.
function verticalCenter(object) {
objectHeight = $(object).height() / -2;
$(object).css({'position':'relative','top':'50%','marginTop':objectHeight});
}
$( document ).ready(function() {
verticalCenter("#promo-heading");
verticalCenter("#center1");
verticalCenter("#center2");
});