Center An Element Horizontally and Vertically with jQuery V-ACenter Plugin

V-ACenter is a jQuery plugin for responsive layout that keeps an Html elements centered in the middle of the page regardless of browser size.

See also:

• jQuery Plugin To Center An Html Element Responsively - jQuery Center
• jQuery Plugin For Any Element Vertical Centering

How to use it:

1. Load jQuery library and the jQuery V-ACenter plugin in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.center.js"></script>

2. Create an Html element that will be centered vertically and horizontally.

<div class="content">

Your content goes here

</div>

3. Call the plugin on the Html element.

$(window).bind({
load: function() {
$('.content').middleIt();
},
resize: function() {
$('.content').middleIt();
}
});

---

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