Responsive Vertical Centering Plugin with jQuery

Responsive Vertical Centering Plugin with jQuery
File Size: 4.64 KB
Views Total: 1118
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

A simple, flexible, responsive jQuery vertical centering plugin that makes any element always vertically centered within its parent, even if the view port changes.

How to use it:

1. Load the jQuery Flex Vertical Center plugin after you have jQuery library loaded.

<script src="//"></script>
<script src="jquery.flexverticalcenter.js"></script>

2. Create an html element that will always stay in the middle of its parent container no matter how the viewport size changes.

<div class="box">
  <p class="centered-item">
    This box is always vertically centered within its parent.

3. Call the function and we're done. This will align vertically the HTML element according to its parent's height in the DOM document.


4. Configuration options.


  // the attribute to apply the calculated value to
  cssAttribute:   'margin-top', 

  // the number of pixels to offset the vertical alignment by
  verticalOffset: 0,        

  // a selector representing the parent to vertically center this element within    
  parentSelector: null,         

  // a default debounce timeout in milliseconds
  debounceTimeout: 25,          

  // if true, nothing will take effect until the $(window).load event
  deferTilWindowLoad: false     

Change log:


  • fixed for jQuery 3


  • Fix complete callback if no options are pass

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