Vertically Align Element

How to Vertically Align Section and Element in all Types of Screens?

Some people use different kinds of complex CSS and JS structures to vertically align a div. But, we’re going to implement a simpler method.

Step 1

Write a div with the class name “vermid-wrap” and this element will act as parent wrap for the element to be vertically aligned.

Step 2

Write a div inside the “vermid-wrap” with the class name “vermid-item”

Code Block

Read More: How to Use Redux in Your ReactJS App in Just 10 Minutes?
<!--- parent wrap --->
 <div class="vermid-wrap">
  <!--- parent wrap --->
   <div class="vermid-item">
    <!--- vertical middle content goes here --->
   </div>
  </div>

Step 3

Now Apply the display:table; property with width & hieght for the class “vermid-wrap”.

Note: The height property can be set to any height.
.vermid-wrap{
display:table;
width:100%; //any width
height:100%; //any hieght
}

Step 4

Now apply the display:table-cell property and vertical align property for the class “vermid-item”

Note: Vertical align property has three options top,middle,bottom. Here, I’ve used te middle option.
.vermid-item{
display:table-cell;
vertical-align: top; //top,middle,bottom
}

Output

Pic Credit – What The Code

It is the easiest way to align elements and section for any device. If you have any questions let me know in the comments.

If you are unable to do that on your own. Hire Expert Web Designer

Rahul Sharma

Rahul Sharma is a Founder of Logical IDEA and Bee Flirty. He is a Professional WP Developers, UX Designer, and Digital Marketing Expert. Previously, He Worked as a Digital Marketing Head for An eCommerce Startup. He Graduated with honors from Lovely Professional University with a Dual Degree in Information Technology.

121 comments

Leave a Reply

Your email address will not be published. Required fields are marked *