How do I implement CSS vertical align?

There is no official technique to center your content vertically. This is a problem that frequently gives a web developer trouble and makes frustrated. Don’t worry about CSS vertical-align! There is the variety of technique to make CSS vertical-align possible. Today we are going to show you the best few techniques to align your content vertically.

Technic#1 Using CSS Line Height Property

This technique is worked when you only have a single line textual content in a container. In this case, you are able to align the text by using line-height property of CSS by setting the appropriate value. An equal place is set on top and bottom of this text, so the text automatically aligned vertically center.

On the other hand, if you set your container height then the line-height value will be the same as you defined for your container height.



See the Pen Vertical align anything with CSS by Pavel (@bdpavel) on CodePen.light

This code is works on all browsers. Remember this CSS vertical align technique is working only single line text. If your content has two or more lines, you need to apply another CSS vertical align technique which I discussed below.

For multiline text, the space between of each line would be as you specified in your line-height property. This produces too much white-space.

Technic#2 Equal Top and Bottom Padding for CSS vertical align

This is another mind-blowing CSS vertical-align technique to resolve our problem. We mentioned above some others techniques in this post and we allow the browser to set automatically the margin of a child element, so they would be equal. We do something similar to set the padding of top and bottom on the parent element to be equal.



See the Pen Equal Top and Bottom Padding by Pavel (@bdpavel) on CodePen.light

This is simple to add an equal padding to vertically center a child container within a parent container with the content inside the child container.

We set the pixel padding for fixed the container, but you can also set in % to allow both containers dynamically.

That’s the another simple CSS vertical-align technique to make anything vertically centered inside the child content.

Technic#3 Absolute Positioning and Negative Margin Technique of CSS vertical align

This technique is using for any block level element and requires a height on the centered element. It works fine on all browser. To apply this CSS vertical-align technique, we need to have a parent and child div. Set the position of these elements respectively as relative and absolute. This technique is allowing us to move freely the child container inside the parent.



See the Pen Vertical align anything with Absolute Positioning and Negative Margin Technique by Pavel (@bdpavel) on CodePen.light

Here, we set the child element top by half of its height and pull left by half of its width. Now set the top margin a negative value equal to its half height and left margin to its half of width.

It works perfectly when your parent content only has a child element and you know the heights and widths of this elements, otherwise the absolute position will affect the other elements in the same container.

That’s the simple technique to make anything vertically centered inside the child content.

Technic#4 Using CSS Table Technique

This technique is simple and so cool to align center your content vertically. It works fine on old browser like IE 8. To apply this technique, we need to have a parent and child div inside the parent. Display the elements respectively as table and table cell then uses CSS vertical-align property on child content to center text vertically.


Here, we set display property as a table on our parent div and display as table-cell on child div. Then we apply vertical-align and set it to the middle.


See the Pen CSS Table Technique to align center vertically! by Pavel (@bdpavel) on CodePen.light

Remember, CSS tables are not the same as HTML tables.

That’s the simple technique to make anything vertically centered inside the child content.

Technic#5 Flexbox Technique (The best way to)

We reached the bottom. This is our last technique today to center an element vertically using flexbox. This is a new feature in CSS3 and allowing us more straight forward technique to align an element. With flexbox, you can stop worrying about vertical center alignment.

Flexbox offers you to align anything vertically and horizontally with its extreme powerful properties. These are – align-items, align-self and justify-content



See the Pen Align center vertically anything by Flexbox by Pavel (@bdpavel) on CodePen.light

Remember, some browsers such as Internet Explorer 10, Safari 6, Chrome 27 and below are not support the full features of CSS Flexbox, the above browsers support some partial features. In this case, you can use CSS transform to make sure that it going nicely on those browsers.

Solution for applying vertical-align in Bootstrap 3 or below version

In Bootstrap 3 and below version, by default, you can not align any contents vertically. It really annoying!!! Bootstrap team resolve this issue and introducing it on the latest version Bootstrap 4. You can find it on vertical-align section.

So let’s back to our discussion. If we use Bootstrap 3 or below version, how we aligned content vertically? Just read out the below Technic and apply it to make any content’s to vertically aligned.


Simple creating a class vertical-align and set display property as flex. Now apply this class along with the bootstrap row class and this row contains some columns. Just write an attribute selector for select all columns and set the display property as flex. And also set the align-items, and justify-items properties value to center.


That’s it. All of your columns content will be vertically aligned with this simple Technic for bootstrap.

See the Pen Vertical aligned contents in Bootstrap by Pavel (@bdpavel) on CodePen.light

That’s all for today. We do Believe, you enjoy this article and learn something new to solve vertical alignment problem. Thanks for being with us.