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; /* 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:

Related

Comments

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

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

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.

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.

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

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?

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.

This comment thread is closed. If you have important information to share, please contact us.