This simple plug-in centers the content of the selected elements in the viewport or optionally in the specified container element.

Options

The options parameter can be a map of any of these properties (default values are shown):

var opt = { forceAbsolute: false,
    container: window,    // selector of element to center in
    completed: null,
    centerOnceOnly: false
};

forceAbsolute
Forces the selected elements to document absolute level. Use this option if the element doesn't center correctly which can happen if its position is relative already. When set the element is removed from its current hierarchy and moved to a child of body.

container
The element in which the selected element(s) are centered. Defaults to the window/viewport. Provide as a jQuery selector.

completed
Optional event handler that is fired when centering is completed. The called handler receives the element that is to be centered as a parameter.

centerOnceOnly
When true will center the element only the first time centerInClient() is called on this element. Repeated calls will simply return if the flag was previously set. This is useful for many UIs where you want to center a dialog or UI element once in the center, but from then on allow the user to use the element at it's dragged location. To force an element to center, set this flag to false explicitly.

Simple centering

$("#divMessage").centerInClient();   // centers in window

Center in another element

$("#imgLoading").centerInClient( { container: $("#divCustomerPanel") });