May 10 2011

Centering DIVs with jQuery centerXY Plugin

Centering DIVs horizontally can be a pain, but it seems there are a couple of generally accepted, cross-browser compatible, solutions available (such as setting a fixed width with margin-left: auto and margin-right: auto).  Centering DIVs vertically can be much more challenging.  Not wanting to worry about nesting DIVs and making sure the CSS was set properly for each of those, taking into account the idiosyncrasies of each browser, (here is an article I have yet to read, but has received great reviews) I looked for a jQuery solution…

…And I found the centerXY Plugin for jQuery.  The plugin is extremely easy to use and centers DIVs both horizontally and vertically within its parent, with the ability to specify offsets for each direction if you don’t want it dead-center.  If the parent is the body, then the DIV is centered with respect to the browser window.

I have verified that the centerXY plugin for jQuery works correctly in:

  • Internet Explorer 6 (IE6)
  • Internet Explorer 7 (IE7)
  • Internet Explorer 8 (IE8)
  • Internet Explorer 9 (IE9)
  • Firefox 3.x
  • Firefox 4.x
  • Safari
  • Chrome
  • iOS (iPhone and iPad)