Centering an element vertically and horizontally using jQuery

Since version 1.8 jQuery UI comes with a new position() method that positions an element relative to another. Using this method it's easy to center any element vertically and horizontally.

This example centers elements after the page has been loaded but also when the browser window has been resized.

function center(selector) {
  $(selector).position({ my: "center", at: "center", of: window });
}

$(window).resize(function()  { center(".centered"); });
$(document).ready(function() { center(".centered"); });

In HTML you have to include jQuery and jQuery UI libraries, and then just mark all elements you want to center with a class called "centered".