CSS

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

Rahul Woll
Published: May 1, 2024
What's on this page:
What's on this page:

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

Note: Note: The height property can be set to any height.

Copied

.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: Note: Vertical align property has three options top,middle,bottom. Here, I’ve used te middle option.

Copied

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

Output
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. Hire Web Developer