CSS Quick Tip: Center a Div Horizontally and Vertically

  • follow us in feedly
Published December 4, 2013 by Brad Knutson
CSS Quick Tip: Center a Div Horizontally and Vertically

A very common problem that designers face is the need to center an object both horizontally and vertically. Perhaps it’s an integral design element, or just a modal popup. The solution that first comes to mind is setting a fixed height and width, and then setting the margin to auto like so:

This doesn’t work

The problem is this only centers the element horizontally in reference to it’s parent container. margin: auto; doesn’t vertically center the element.

What about margin: 50% 50%;?

This doesn’t work either

That doesn’t work either, because when we specify a margin of 50% we are actually referencing the width of the object, which we’ve set in the CSS.

Most new designers will give up and just use Javascript or jQuery to dynamically position the element in the middle of the screen. There isn’t anything wrong with this, as it works just fine. But there is a solution that doesn’t require Javascript, and works with plain old CSS.

The CSS Only Solution

This works!

Not bad, right? With a little CSS trickery we’re able to position the element in the middle of the parent element (or entire page if you prefer).

What do you think? Do you know an easier way to center an element vertically and horizontally?

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

7 thoughts on “CSS Quick Tip: Center a Div Horizontally and Vertically

  1. Alex

    There are more easier ways:
    1. {margin: 0 auto;}
    2. {margin: 0 25% 0 25%; width: 50%;}
    3. {left: 50%; margin-left: -500px; position: absolute; width: 1000px;}
    4. and super-method for inner float blocks like menu:
    #dop-block{
    position: relative;
    float: right;
    right: 50%;
    }
    #block{
    position: relative;
    float: left;
    left: 50%;
    }

    Reply
  2. Alex

    So…what about this way?
    .centered-block {
    width: 50%;
    margin: auto;
    position: absolute;
    top: 50%; left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    }

    Reply
    1. Alex

      Another one (for non-adaptive cases):
      .div{
      width: 300px;
      height: 200px;
      padding: 20px;
      position: absolute;
      top: 50%; left: 50%;
      margin-left: -170px; /* (width + padding)/2 */
      margin-top: -120px; /* (height + padding)/2 */
      }

  3. Timur Ramazanov

    Thank you very much, Brad! I fought with this task so many times, but never guessed such way! Can you tell, please, how did you get to this? I hate this kind of magic in CSS, when for doing obvious things you need to write non-obvious code :) I hope, you can help me to understand.

    Reply
    1. Brad Knutson Post author

      Hey Timur,

      When I come across situations like this that I’m not sure of the solution, I usually search Google for a solution. I have a few sites that I look to for trusted solutions, but there is a lot of bad advice out there. When I find a solution to something that is not particularly well documented, I’ll write a post like this in the hope of helping someone like yourself searching for the answer.

      Good luck!

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">