It often seems like a lot more effort than necessary when aligning things vertically in CSS, especially when using responsive designs. This CSS vertical align tip shows you a quick solution, using just three lines of CSS (excluding vendor prefixes).

This simple trick is compatible in nearly all browsers, including IE9, and requires just three lines of code. It’s a very easy way to vertically align almost anything.

So, enough with the chat – here’s the code:

.element {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
As with the old method, we still need top: 50%; but we no longer require a fixed height. No matter what the height of your element, even if it’s a percentage, the transform: translateY(-50%) will move the element back up by half of its height – aligning it centrally.

All of the vendor prefixes are included, so this trick should work in nearly all browsers, including IE9! It works for text, images, multiple lines of text – almost anything can now be vertically aligned easily.

You can check out a live demo for this on CodePen:

See the Pen naDbf by Web, Tech & Gadgetry (@webtechgadgetry) on CodePen.0