Centering Elements Vertically with jQuery - centerEl

centerEl is a lightweight jQuery solution to center multiple block elements vertically inside their parent container. Check out this article If you're looking for a pure CSS solution to vertically align an block element.

See also:

• jQuery Plugin To Center An Html Element Responsively - jQuery Center
• jQuery Plugin For Any Element Vertical Centering
• Center An Element Horizontally and Vertically with jQuery V-ACenter Plugin

How to use it:

1. Include the jQuery centerEl plugin after you have jQuery installed.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="src/jquery.centerEl.js"></script>

2. Call the plugin on the block element and specify the parent element.

$("#element").centerEls({

absolutePositioning: true,
parentEl: "#parent-element",

});

3. Default plugin settings.

$("#element").centerEls({

additonalOffset: 0,
absolutePositioning: 0,
left : 0,
right :0,
bottom : 0,
parentEl: "",

});

4. Methods.

// Recalculate the element's height
// Useful for responsive layout
$("#element").data("plugin_centerEls").recalc();

// Destroy the plugin
$("#element").data("plugin_centerEls").destroy();

// Initialize the plugin
$("#element").data("plugin_centerEls").init();

---

This awesome jQuery plugin is developed by mohandere. For more Advanced Usages, please check the demo page or visit the official website.