center a div vertically and horizontally – with jquery
by admin on Sep.21, 2010, under tech
I’ve recently had various issues where I wanted to center a div on a page vertically or horizontally. Doesn’t sound too hard, right?
Before CSS dictated the way a website was displayed, tables ran rampant and everything was laid out in columns and rows. Then CSS evolved a bit and things started to get laid out in block elements or ‘divs’. But divs lack a good way to vertically center an element on the page.
Throw in various screen resolutions and you can get your site looking like *ish very quickly.
There are various ways to vertically center a div on a page – Douglas Heriot goes into a few of them over here. But, nothing really worked until I found an article from Neil Gosskopf.
Basically, the plugin looks at the outside height/width of the element you are trying to center and places a margin on that element accordingly and absolutely positions it.
And the code is as simple as:
$(‘#elementID’).vAlign();
$(‘#elementID’).hAlign();
Ah, jquery. Where have you been my whole life?
Anyways, if nobody else comes across this article, at least I’ll have a reference to it next time I need to vAlign or hAlign an element on a page.
