jQuery Plugin To Align Element Vertically - vertical-align

vertical-align is a simple, lightweight jQuery solution to vertically center any HTML elements relative to their parent container. Supports both on page load and page resize events.

How to use it:

1. Insert your target element to a container as this:

<div class="demo">
  <img src="demo.jpg" id="demo">
</div>

2. The parent container must have a fixed height.

.demo {
  height: 100vh;
  text-align: center;
}

3. Download and insert the JavaScript file vertical-align.js after jQuery JavaScript library.

$('#demo').verticalAlign();

4. Attach the plugin to the element and done.

$('#demo').verticalAlign();

Change log:

2017-07-07

• overflow fixed

---

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