Quick Tip: The Simplest Way To Center Elements Vertically And Horizontally

Flexbox is a relatively new addition to the CSS world and we keep finding more and more excellent applications for it. We can even solve the age-old problem with centering an element both vertically and horizontally with CSS. It is easier than you can imagine - it is only three lines of code, doesn't require you to specify the size of the centered element and is responsive-friendly!

This technique works in all modern browsers - IE10+, Chrome, Firefox and Safari (with the -webkit- prefix). See the full compatibility table here.

<div class="container">
    <!--// Any content in here will be centered.-->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus, eros et aliquam volutpat, ante tellus bibendum justo, et mollis orci velit ut odio. Maecenas sagittis mi velit, sit amet varius lorem ornare in. Sed dapibus turpis vel nunc finibus cursus. Nunc erat purus, sodales sit amet neque et, aliquam pretium felis. Mauris eros est, elementum eu eros ut, feugiat fermentum metus. In hac habitasse platea dictumst. Integer tristique semper semper. Etiam quis ligula sit amet ipsum condimentum euismod. Praesent iaculis ante et magna suscipit vulputate. Curabitur vitae porttitor erat. Vivamus vel blandit tellus, ut sollicitudin metus.</p>
</div>
*{
    margin: 0;
    padding: 0;
}

body, html{
    height: 100%;
}

.container{
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;
}

.container p{
    max-width: 50%;
    padding: 15px;
    background-color: #f1f1f1;
}

The HTML

The idea, of course, revolves around flexbox. First, we create a container in which we want everything to be centered:

<div class="container">
    <!--// Any content in here will be centered.-->
    <img src="fireworks.jpg" alt="fireworks">
</div>

You can place this container div anywhere you want. In the live example above we've made it take up the whole width and height of the page.

The CSS

As we said earlier, we will be using only three lines of code. Here they are:

.container{
    display: flex;
    justify-content: center;
    align-items: center;
}

Every flex container has two axis for positioning elements. The main axis is declared with the flex-direction property (can be row or column, see docs). By omitting this rule, we've left the flex direction to its default row value.

Now all that we need to do is center both axis. It couldn't get any simpler:

  1. Make the display type flex, so that we activate flexbox mode.
  2. justify-content defines where flex items will align according to the main axis (horizontally in our case).
  3. align-items does the same with the axis perpendicular to the main one (vertically in our case).

Now that we have set the rules for the vertical and the horizontal alignment to center, any element we add inside the container will be positioned perfectly in the middle. We don't need to know its dimensions beforehand, the browser will do all the hard work!

Conclusion

There are lots of other techniques for centering content with CSS, but flexbox makes this a whole lot simpler and more elegant. If you wish to learn more about it, check out these resources:

  • A complete guide to flexbox - here.
  • MDN: Using CSS flexible boxes (a long read) - here.
  • Flexbox in 5 minutes - here.
Bootstrap Studio

The revolutionary web design tool for creating responsive websites and apps.

Learn more

Related Articles

Comments 21

Joe Twumasi

What about IE compatibility and other older browsers?

Nice article on centering elements vertically and horizontally.

Danny Markov

Thanks! IE 10+ support flexbox, as well as all other new(ish) browsers. See here.

Well, that looks simple enough! Thanks for sharing :D

Maurizio

I think flex-box is very useful, but we have to keep in mind that is not fully supported by browsers (ie. IE 8 - 9 )

p.s. sorry for my awful english

Danny Markov

Thanks Maurizio, you're right. If your visitors use old version of IE your will have to stick with the usual techniques for centering content.

IE < 10 doesn't just "not fully support" flexbox, it doesn't support it at all!
But it's also time to ignore that old browser, honestly.

Alexander Dimitrov

Yeah i wish :( I am WP Dev, and WordPress officially does support ie9, so your site must be ie0 compatible, the only reason i am not using it yet. But true, we should move on finally...

Jayesh Morker

How to add prefix for "Safari" browser?

Danny Markov

Thanks for bringing this to our attention, Jayesh. We didn't mention it in the article but for this technique to work in Safari prior to version 9 you need to prefix the flexbox properties with -webkit-. This also applies to iOS Safari.

Doesn't work on iPhone iOS 7.0.4 or iPad iOS 7.1.4 bro!

Danny Markov

It does work, you only need to prefix it.

Oh yes! It works!!!

Amir Off

Thanks Danny, I was struggling until I found this article. Traditional centering techniques didn't help in my case!

well done!

sunpietro

There's also another way to center elements inside:

.container {
  display: flex;
}

.container img {
  margin: auto;
}

Simple flexbox-based centering solutions may lead to some surprise when the content becomes taller than the container. Just adding overflow: auto to container won't help: http://jsfiddle.net/wp8av11c/1/

This looks like a better solution for me:

position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);

Indeed, you're right !

So the best option is to >

1 - set default to :

position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

2 - if the browser is suported, use :

display: flex; justify-content: center; align-items: center;

Divy Singh Rathore

Wow, you made problem of centering very easy.
Thanks

Md. Elias

That is awesome... waiting for next awesome article :)

Abbas Uddin

How about browser hack?
div.mybox{
padding: 45% 0%;
margin-left: auto;
margin-right: auto;
}