Vertical Center

Vertical Center lets you easily vertically center elements.

Features

• Center an unlimited number of elements independently
• Specify simple CSS/jQuery selectors to target elements
• Easy to use admin interface
• Items are vertical centered immediately after the page has loaded
• Adds a class to each centered element after it has been centered (useful for CSS transition effects)
• Fully responsive (automatically updates on resize and orientationchange events)
• Works on mobile devices
• Works across all modern browsers (including IE8)
• Trigger custom ‘verticalcenter’ event to force a recalculation
• Debounced resize events for added smoothness

Check out the Screenshots tab for a gif of the plugin in action.

Instructions

1. 01Navigate to Settings > Vertical Center in the WordPress admin.
2. 02Enter a selector and an offset for the element(s) you want to center.
3. 03Add/remove additional elements by clicking the “+ Add More” and “Remove” buttons.

Advanced

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: