Vertically Align Anything with CSS

Since I first started learning CSS, I have battled with vertically aligning content within a div for all screen sizes. I was constantly using media queries to reposition the content or using methods that would work for one part but break another time. It was never perfect…. Until now!

A friend of mine showed me this technique and I have been using it on client work for the past month. It works flawlessly and I have not run into any issues.

It’s simple. Here is how to setup the HTML.

<div class="va-container">
<div class="va-center">
Your awesome content here
</div>
</div>

That’s it for the HTML. now for the CSS magic.

.va-container { 
top: 50%;
position: relative;
}
.va-center {
/* vertically align */
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
/* horizontal center*/
display: table;
margin: 0 auto;
}

And that’s it!

I wanted to share this in hopes that you can take it to your projects and never have to worry about vertically aligning anything again.

If you want to see it in action check it out here.

Enjoy and let me know what you think.

Show your support

Clapping shows how much you appreciated Cole Perkins’s story.