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; /* or absolute */
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:
This works wonderfully when you know the size of the thing you are centering. If you don’t know, or are thinking it might change and want to be future proof, try this:
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
The translate
value for transform
is based off the size of the element, so that will center nicely.
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.htcAnd what if my “object to be centered” is in percents? Or i dunno what heught it would be (liquid height)?
Great post, I was looking for this trick. Thanks.
Me too..Thanks Chris!
@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!
Too basic.
Nice little tip may come handy. A good developer should have figured this out like you did.
@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.
@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.
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.
@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:
https://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.
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
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?
@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
This fixes the scrollbars:
http://exanimo.com/css/vertical-centering-with-a-floated-shim/
great post, been looking for how to do this for ages
so far i’ve done something like this:
margin: 0 auto;
but im not sure this is the best way.
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?
lovelylovelylovely!
I found another good trick
.centered-horizontal
{
left:-50%;
position:relative;
}
Simple, quick and exactly what I needed, thanks!
Works perfect in divs, outside, wherever you want..but in IE8 won’t work at least you declare the !doctype
You’re welcome:)
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.
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.
I use jQuery to determine the margin-top and margin-left.. It perfectly centers dynamic elements.
Nobody seems to have caught you have your numbers on your diagram backwards. (You put
top:
on a left-to-right arrow and vice versa)Try:
CSS:
HTML:
Interesting DOM. Chris Coyier’s code is CSS kindergarten. Not responsive.
To inject CSS code…
left:50%; top:50%;
left: -0.5(objectwidth); top: 50%(objectheight) ? ?
How do we code 50% of relative width/height using CSS?
Responsivity rocks ((maybe not me)), but how about this as starting point.
There is a trigonometric relationship between left, margin-left, and width.
Instantiated by the browsers’ grip on the liquid balance of height-width ratio.
So logic screams, “There is a keyhole here!”
background-size: auto; left: 50%; margin-left: -12.5%; width: 25%;
… well that’s magical !!
Rather boring if every image is exactly 50%. Extrapolation?
More like a sink-hole marker. Fits the keyhole, not the key. Any ideas?
Reporting a conundrum, throwing light on the elusive term ‘responsive’. One drawback of this 50% model: When zoomed in and out, 50% image remains exactly the same size, while everything else zooms in and out. Though centered and liquid as browser window changes size, this image is not ‘responsive’ respecting device zoom technology. As devices zoom in to enlarge type… Type adaptation deploys relative liquid width:100% inside container.
We would be interested to see how Chris wraps his vernacular around our half-sized miracle, say in an extension of his topic above. Sorry for chain posting, discovery is exciting. I’ll leave this to all of you people now.