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

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>
    margin: 0;
    padding: 0;

body, html{
    height: 100%;

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

    height: 100%;

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


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

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.


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

    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!


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.
Presenting Bootstrap Studio

a revolutionary tool that developers and designers use to create
beautiful interfaces using the Bootstrap Framework.

Learn more
Web Browser Frame DevKit Box Mouse Cursor
by Danny Markov

Danny is Tutorialzine's Bootstrap and HTML5 expert. When he is not in the office, you can usually find him riding his bike and coding on his laptop in the park.

1Share this post
2Read one more article
3Get your free book
Book Cover
jQuery Trickshots

Tutorialzine's advanced jQuery techniques book.



  1. Joe Twumasi says:

    What about IE compatibility and other older browsers?

    Nice article on centering elements vertically and horizontally.

    1. Danny Markov says:

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

  2. Natalie says:

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

  3. Maurizio says:

    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

    1. Danny Markov says:

      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.

    2. MaxArt says:

      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.

      1. Alexander Dimitrov says:

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

  4. Jayesh Morker says:

    How to add prefix for "Safari" browser?

    1. Danny Markov says:

      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.

  5. Gindev says:

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

    1. Danny Markov says:

      It does work, you only need to prefix it.

      1. Gindev says:

        Oh yes! It works!!!

  6. Amir Off says:

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

  7. jack says:

    well done!

  8. sunpietro says:

    There's also another way to center elements inside:

    .container {
      display: flex;
    .container img {
      margin: auto;
  9. SelenIT says:

    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/

  10. Tadas says:

    This looks like a better solution for me:

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

    1. DidouPh says:

      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;

  11. Divy Singh Rathore says:

    Wow, you made problem of centering very easy.

  12. Md. Elias says:

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

  13. Abbas Uddin says:

    How about browser hack?
    padding: 45% 0%;
    margin-left: auto;
    margin-right: auto;

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links