Quick CSS Trick: How To Center an Object Exactly In The Center
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.
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:
Loading ...
1
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.htcComment by Mariusz — November 14, 2007 @ 1:57 am
2
And what if my “object to be centered” is in percents? Or i dunno what heught it would be (liquid height)?
Comment by Cosss — November 14, 2007 @ 2:47 am
3
Great post, I was looking for this trick. Thanks.
Comment by Jochen Van de Velde — November 14, 2007 @ 4:46 am
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!
Comment by Chris Coyier — November 14, 2007 @ 6:28 am
5
Too basic.
Comment by Ze Baralho — November 14, 2007 @ 8:36 am
6
Nice little tip may come handy. A good developer should have figured this out like you did.
Comment by zparacha — November 15, 2007 @ 10:43 am
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.
Comment by David Millar — November 15, 2007 @ 3:07 pm
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.
Comment by Chris Coyier — November 15, 2007 @ 8:19 pm
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.
Comment by Hudson Tavares — November 24, 2007 @ 3:04 am
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.
Comment by Chris Coyier — November 24, 2007 @ 12:23 pm
11
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
Comment by chall — November 28, 2007 @ 8:16 pm
12
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?
Comment by Joe Porritt — December 11, 2007 @ 6:35 pm
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
Comment by Chris Coyier — December 11, 2007 @ 7:50 pm
14
This fixes the scrollbars:
http://exanimo.com/css/vertical-centering-with-a-floated-shim/
Comment by Mark — January 3, 2008 @ 12:49 pm
15
great post, been looking for how to do this for ages
Comment by andy — January 25, 2008 @ 9:33 am
16
so far i’ve done something like this:
margin: 0 auto;
but im not sure this is the best way.
Comment by delang — June 18, 2008 @ 8:48 pm