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 a parent wrap for the element to be vertically aligned.

Step 2

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

Step 3

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

.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”

.vermid-item{
display:table-cell;
vertical-align: top; //top,middle,bottom
}

Output

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.