Centering Responsive Element with jQuery - centerThis.js

Just another jQuery centering plugin that makes you responsive element always stay centered even when you resize the browser window.

How to use it:

1. Put jQuery JavaScript library and the jQuery centerThis.js plugin at the bottom of the web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="centerThis.js"></script> 

2. Assume that you wish to make an element always be centered relative to its parent container.

<div class="parent">
  <div class="container">
    Centered Responsive Element
  </div>
</div>

3. Call the function.

$(".parent .container").centerThis();

4. The required CSS.

html, body {
  width: 100%;
  height: 100%;
}

.parent {
  height: 100%;
  width: 100%;
}

.container {
  margin: 0 auto;
  width: 65%;
}

5. Yo can also make the DIV element stay centered relative to the browser.

$(".parent .container").centerThis(window);

---

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