Grow your CSS skills. Land your dream job.

Quick CSS Trick: How To Center an Object Exactly In The Center

Published by Chris Coyier

I recently needed to make a placeholder page for a site. I wanted the logo image to be centered exactly in the middle of the screen, that is, both vertically and horizontally centered. Quickly, I thought I'd just give the image element a class of "centered" and then style that class:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
}

But as I'm sure you are thinking, this doesn't quite work. What that accomplishes is putting the upper left corner of image exactly in the center of the page, not the center of the image in the center of the page.

not-centered.gif

In order to get the image exactly centered, it's a simple matter of applying a negative top margin of half the images height, and a negative left margin of half the images width. For this example, like so:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

That will do the trick:

centered.gif

Comments

  1. Permalink to comment#

    Yeah right, but doesn’t work in IE6, as you probably know, so you should go for * html .centered { position:absolute } because IE6 has bug that makes it support position:absolute as position:fixed in Quirks Mode. You can also use more sophisticated tricks like ie-fixed.htc

  2. Cosss
    Permalink to comment#

    And what if my “object to be centered” is in percents? Or i dunno what heught it would be (liquid height)?

  3. Great post, I was looking for this trick. Thanks.

  4. @Mariusz: Yes, that is exactly what is needed to make sure it works in IE 6, thanks for pointing that out.

    @Cosss: It’s not going to be nearly as easy then. This technique was just to center a simple image logo. You could always give it a bit of a top margin and horizontally center it with:

    margin: 20px auto;

    Or you could use a table which supports vertical centering. Or there is likely a javascript solution as well.

    @Jochen: Great, glad this was useful!

  5. Ze Baralho
    Permalink to comment#

    Too basic.

  6. Permalink to comment#

    Nice little tip may come handy. A good developer should have figured this out like you did.

  7. @Cosss and Chris
    On the contrary, wouldn’t it be even easier then?
    I mean, if your width is 20%, half of that is 10%, 50% – 10% = 40%, so set it up like this:
    left: 40%;
    width: 20%;

    That’s what seemed logical to me but I’m half asleep right now so who knows.

  8. @David: Yep, you are right, if the width of the object is a percentage, just make your “left” half of the remaining percentage. As in, left percentage = (100 – width percentage).

    But as vertically centering a fluid height object, that’s tougher. That’s pretty much just table territory.

  9. Chris,

    This technique isn’t a secure way for centering objects; i used to center larger blocks combining left/top and margin-left/margin-top, until somebody discover a terrible fact about that.

    E.g., on a bigger box:

    #centered
    {
    width:900px;height:400px;
    left:50%;top:50%;
    margin:-200px 0 0 -450px;
    border:1px solid #000;
    position:fixed;
    }
    * html #centered { position:absolute;} /* As Mariusz noticed */

    If you try to reduce the width of your window to some size smaller than 900px, the left and right parts of the box will be covered by your window as tinier as the window size is (the same will happen if you reduce the size of your window vertically).

    And the scroll bars will not be visible, no matter if you’re testing it on FF, IE, Safari or Opera; there’s a meaningful explanation.

    On a window greater than the size of your object, the middle x and y points are on a position equal or greater than the object margins.

    Example:
    window size: 1000 x 600

    central point: 500 x 300
    object margins on my example: -450 x 200
    ————————————————————————
    object’s position: 50 x 100

    However, in a narrow window…

    Example:
    window size: 700 x 600

    central point: 350 x 300
    object margins: -450 x -200
    ——————————————————–
    object’s position: -100 x 100, resulting on a negative position.

    Nevertheless, it’s a good technique for small objects.

  10. @Hudson Tavares: You are right that you will not get scroll bars if your window size shrinks below the size of the object you are centering. Check out an example of this:

    http://css-tricks.com/examples/CSSCentering/

    I also understand what you are saying about ending up with a negative position, since you would be able to shrink the window to the point you could lose content off the edges with no way to scroll around to get to it. I think if anyone has their browser window shrunk down to 500px wide or so, they know what they are doing and understand that content pages are not meant to be viewed in that way.

    If you are dealing with centering actual content, I think going with horizontal centering and static vertical positioning is a much healthier way to go.

  11. Permalink to comment#

    I was using the 50%/50% css positioning, but ended up having the same problems Hudson was having… the top of the site was getting cut off on smaller browser window sizes. I was using javascript/jquery on the site already, so just wrote a function that was called onload and onresize. Wish there was a way to make it work with strictly CSS.


    function setCenter(whichDiv) {
    var newX = ($(window).width() - $(whichDiv).width())/2;
    var newY = ($(window).height() - $(whichDiv).height())/2;
    if (newY

  12. Joe Porritt
    Permalink to comment#

    I’m a rookie trying to figure out CSS. I like this trick, but it only seems to work with a logo or something you are centering in the browser. However, I have a box I formed using the “div” tag, and I’m trying to center an image in that box. This trick takes the image out of my box and centers it in the browser. Is there some way to keep the image in my box and center it on the box and not the browser?

  13. @Joe Porritt: Do you know the width of the div in which you are putting the image? If you do, you can always just give the image a class and then apply some left margin through that class to center it. If you do not, you can actually use text-align to center the image since images are inline level elements by default.

    Don’t be tempted by the ways of deprecated tags like <center>. It’s just a bad habit =P

  14. andy
    Permalink to comment#

    great post, been looking for how to do this for ages

  15. so far i’ve done something like this:
    margin: 0 auto;
    but im not sure this is the best way.

  16. Permalink to comment#

    OK, let’s kick this up a notch:
    Can I have 2 boxes (of different colors) centered in the middle, and the left box repeats to the left, and the right box repeats to the right… and they always stay centered, true center?

  17. Permalink to comment#

    lovelylovelylovely!

  18. alexei
    Permalink to comment#

    I found another good trick
    .centered-horizontal
    {
    left:-50%;
    position:relative;
    }

  19. Ran Davidovitz
    Permalink to comment#

    Simple, quick and exactly what I needed, thanks!

  20. Hans
    Permalink to comment#
    .centered {
               //You can use just margin:auto; or both left and right margin auto :)
               margin-left: auto;
               margin-right: auto;
               width:70%; //Just for example this width
    }
    

    Works perfect in divs, outside, wherever you want..but in IE8 won’t work at least you declare the !doctype
    You’re welcome:)

  21. Permalink to comment#

    Thank you for this site and for all that you do. This site has proven helpful to me when I was in a jam on more than a handful of occasions. Your work inspires mine to be better.

  22. Actually I’ve found the best way to do this is with a table. It works in all browsers (even IE). Also, this way you never need to know the size of the image.

    <table align="center" height="100%">
    <tr>
        <td valign="center"><img src="music.jpg"/></td>
    </tr>
    </table>
    
  23. MikeCrisis
    Permalink to comment#

    I use jQuery to determine the margin-top and margin-left.. It perfectly centers dynamic elements.

    var centeredWidth = $('.centered').width()/2, 
        centeredHeight = $(.centered').height()/2;
    
    $('.centered').css({ 'margin-left' : -centeredWidth , 'margin-top' : -centeredHeight });
    
  24. Nobody seems to have caught you have your numbers on your diagram backwards. (You puttop:on a left-to-right arrow and vice versa)

  25. Try:
    CSS:

    div.DMain{width:980px;height:auto;border:1px solid #0033FF;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}

    HTML:

    <div class="DMain">
    This is a text
    </div>

  26. David
    Permalink to comment#

    thanks!

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".