Centering Responsive Element with jQuery - centerThis.js

File Size: 4.68 KB
Views Total: 351
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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

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.