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:
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