Easily vertically center any element relative to its container. Fully responsive.
Vertical Center lets you easily vertically center elements.
Check out the Screenshots tab for a gif of the plugin in action.
Want to trigger the vertical centering manually? No problem. You can skip entering a selector on the settings page and call the jQuery script yourself using either .initVerticalCenter()
or .doVerticalCenter()
. The .initVerticalCenter()
method sets up the event listeners to recalculate if the window is resized, while the .doVerticalCenter()
method directly centers without attaching any events:
// Attach events and center. jQuery( '.selector' ).initVerticalCenter(); // Center without attaching events. jQuery( '.selector' ).doVerticalCenter();
Both functions take one optional argument, the offset value (as a number of pixels):
jQuery( '.selector' ).initVerticalCenter( offset ); jQuery( '.selector' ).doVerticalCenter( offset );
To offset the calculation by 20 pixels:
jQuery( '.selector' ).initVerticalCenter( 20 );
The functions are chainable. My personal favorite way to use this plugin is to inline style="opacity: 0;"
on the elements that I am centering (to guarantee they’ll be transparent when the DOM loads) and then fade them in with something like this:
jQuery( '.selector' ).initVerticalCenter().delay( 200 ).fadeTo( 'slow', 1 );
Or to achieve the same effect with only CSS you can use the vc-complete
class that gets added to each target element after the initial centering (added in version 1.0.3), which might look like this:
#target { opacity: 0; transition: opacity 0.5s; } #target.vc-complete { opacity: 1; }
This plugin also adds an event ‘verticalcenter’ to the window, allowing you to easily trigger the vertical centering manually. This is useful if you have added items to the page after it loads via AJAX. You can trigger the event like this:
jQuery( window ).trigger( 'verticalcenter' );
/vertical-center
directory to the /wp-content/plugins/
directory.Yes! When the script runs it creates event listeners for the window resize and orientationchange events and recalculates the vertical centering after those events trigger.
Yes! From the settings page you can enter as many selectors as you’d like, giving you the ability to vertically center an unlimited number of items.
The jQuery script uses the selector to always grab the items fresh from the DOM in its current state, so as long as the selector matches the newly added element it will get included in the calculation. You can trigger the vertical centering manually at any time (such as after new content has been added via AJAX) by triggering the ‘verticalcenter’ event on the window like this:
jQuery( window ).trigger( 'verticalcenter' );
.doVerticalCenter()