Lots of designers have used this trick to vertically center blocks of known size in browser windows but, as Jon Hicks points out, some content may be cropped if the browser window is too small. Though it requires a little extra markup, my solution addresses this problem by positioning a shiv shim instead of the content itself.

The purpose of this technique is to center blocks of known height in the browser window. In the example file, the blue rectangle should be centered, not the text inside of it. It has been successfully tested on Safari, Firefox, Opera, and
Internet Explorer versions 5 through 7 on PC.

The example file is here . The source should explain it all.


Comments

Gravatar kevadamson

It warms my cockles when solutions like this come about: that can be used on real projects in real situations. Great stuff. I'll certainly be using it ASAP to freshen up my work a little. Much thanks to Mr. Tretter and Hicks (",)

Gravatar Mike

It's a good idea, except what if you don't know the height of your content that you want centered? :(

Gravatar Joel Pittet

Hi Mike, I just slapped together an alternative to this that is XHTML (Transitional) compliant as well and the top or left won’t disappear when you shrink your browser. Mind you it is really rough but works. Let me know your thoughts.

http://www.joelpittet.com/

Gravatar Simon

Excellent work-around, thanks to you both for your time in showing and implementing this solution.

I've been looking for a solution to this for a while now and have been using the hack that crops the page when the window is resized, which caused half the content to go off screen.

Will be using this method from now on, until W3C can provide a permanent solution ;)

Regards.

Gravatar bill

Cool! Nice solution and good comments!

( But, um, why "shiv?" Don't you mean "shim?" Or do you mean you're knifing the vertical-centering problem? :)

Gravatar matthew

@Mike: This solution won't work for that case (nor will any other that I know of). Sorry.

@Joel: Your solution isn't working for me in FF or Safari. Also, this method is XHTML 1.0 Strict compliant. I just forgot the "type" attribute on the style tag and the CDATA tag. That's fixed now.

@bill: Hahaha you're right, of course! I'll let my idiocy stand while I'm on vacation for the next couple of days and then go through the hassle of fixing it and setting up a redirect for the old permalink.

Gravatar dreamer

Why bother? The name has already caught on. This way it won't get confused with any other technique. Keep the "shiv". :)

Gravatar Joel Pittet

@Mike: I have only got it working in Transitional and not Strict but the only benefit is that the top won't move if the content extends. I did it up really quick from some old development test that did work in Safari so it had some changes. Looks like Safari and Firefox on my Mac work now but probably broke it on IE… i will go check at work.

Gravatar Michal without the 'e'

Man, you're a legend! Cheers!

Gravatar Paul D

I second Bill; let's call it a shim unless you're planning to knife someone with it.

Also, I can't seem to get it to work in Safari on my own. How odd.

Gravatar matthew

@Joel: Just took a look at your source.. I think the crux of this problem is vertically centering without tables. If you don't mind them, however, why not just use the old one-giant-table method?

@bill, Paul D: I agree. It's fixed now. You know, I've had this on my site for a year now and nobody noticed. Then again, nobody noticed my site at all until Jon linked to it!

Gravatar Ilya

A related issue to vertical centering is making columns line up with equal heights — without declaring a height value. One ostensibly-horrid-yet-actually-quite-elegant solution for this uses JS. See Quirksmode curator Peter-Paul Koch's take on it: http://www.quirksmode.org/dom/3column.html

Gravatar StickMaker

color me confused.
http://www.sticksite.com/grizzly/
I want the images in one long "column" down the left side of the page, (no tables) and the comments centered beside the relevant images. The only way I can do it now is to use a lot of BR tags in my html to provide spaces, moving the next image down x number of lines. Without that, images are all over the screen.

Any easy solution for a beginner in css? please?

Gravatar Kai

great thing… i love this workaround

greetings from germany

Kai

Gravatar Dat Nguyen

I just wanted to drop by to say that this is a great solution. When playing play ro-sham-bo, I'm the scissors and you're the rock.

Keep it rockin'.

Gravatar Chris Bloom

Erm, I'm not sure what I'm supposed to be seeing in the demo, but it doesn't appear to be working in FF 2. (Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3) The text is left aligned at the top of the blue box…

Gravatar Chris Bloom

For that matter, it doesn't work in IE7 either. Me thinks your shite is busted.

Gravatar matthew

@Chris:
The text is supposed to be where you see it. It's the blue box that's supposed to be vertically centered in the browser window. Again, this trick is for vertically centering something of known height.

Gravatar nitoo

Hi there,

It works indeed great for vertical centering but…I'm confused, how I am supposed to make it both vertically AND horizontally centered with your technique ?

I used the negative margin technique, but yeah vertically it crops a bit of the content for peeps with lower res since it's in 1024×768 (full flash).

Heeeeelp !

Gravatar nitoo

Nevermind^^

I just found myself.
Simply by adding a "margin:0 auto;" to the content div.
Thanks a LOT for this trick^^

Gravatar matthew

@nitoo: You're welcome!

Gravatar mattmook

Great stuff… have been looking for a solution like this for far too long now, so it's great to actually have one. Works great in Firefox 2 and IE 6 on a PC and Firefox 1.5 and Safari 2 on a Mac.

Gravatar Rooka

Finally a great solution :)

Thank you!

Gravatar asdfasfasf

Nice idea but doesn't work in IE7

Gravatar matthew

Yes it does.

Gravatar Jedidiah

sorry it stripped the tag in my last comment, the screenshot is at
http://jedidiah.co.uk/shiv.png

Gravatar Aleksandar Vacic

If you don't know the height – with the simplest possible HTML:

http://www.aplus.co.yu/lab/rdc/

Gravatar Neil Bradley

I'm using Firefox 2.0.0.5 on Windows XP and the centered block is appearing to the far left of the page in your live example. :(

Gravatar Mike Edwards

the example at http://www.aplus.co.yu/lab/rdc/ is great except it causes elements with CSS background images to flicker white on resize in ie6. Any fixes?

Gravatar matthew

@Jedidiah:
Sorry, what's your screenshot showing?

@Aleksandar:
Ah yeah. The dynamic properties trick is a pretty neat way of getting the job done. It's been around for a while, but it does have a few drawbacks. Even though it's in a CSS document, it is JavaScript, so it's susceptible to the usual JavaScript criticisms. Also, it's invalid CSS. However, when applied selectively to target the flaws of a legacy browser (like you have), the technique can't be beat. Thanks!

@Neil:
Yeah, the example just shows how to vertically center a block. The same old tricks apply for centering it horizontally.

@Mike:
Unfortunately, I don't think so. As I mentioned above, Aleksandar's method is actually using JavaScript. The expression is reevaluated every time the window's resize event fires, which is probably the cause of the flicker.

Gravatar insankaynakları ilanı

thanks…

Gravatar sarav

Good one

Gravatar vijay kumar

Enjoy! vijay web designer provide a div based vertically and horizontally center code but only for outer not a inner.

Vertically and Horizontally Centering a DIV

body {
font-size: 12px;
font-family: arial, helvetica, sans-serif;
color: #333;
}
#wrap{
width:778px;
height:auto;
}
p {
margin: 1em;
}
.comments {
background-color: #e3e3e3;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 2px;
}

#mydiv {
position:absolute;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;
}

This is a vertically and horizontally centered tag. Try resizing your browser.

http://www.vijaycreations.com/

Gravatar Emo Saloy

Thanks and greeting from Uzbekistan. This "hack" was very helpful

Gravatar Jedidiah

Hi Matthew, sorry my domain has changed since I posted the screen-shot and the link is broken, I've uploaded it again here http://jedidiah.eu/shiv.jpg

This is what I see in Safari 3 on Leopard, unless I'm missing the point I'm assuming that it is not rendering correctly as the box is aligned left not centred.

Gravatar Jedidiah

I get it now, vertical not horizontal.

Sorry having a slow day.

Gravatar mcsdwarken

Thanks a lot, it's the solution I've been searching for months! Simple and brilliant!

Gravatar caleb

It's amazing that it took so much googling to find this solution. Works like a dream.

For an idea that's a year and half old, shouldn't more people have picked up on it?!

Thanks Matthew!

Gravatar Slicing skill list - Wolf’s Little Store

[...] Vertical centering with a floated shim as explained here. [...]

Gravatar daniil

Thank you, perfect solution for what I needed!

Gravatar mike

Sorry for stupid question, but where is the source with the code?

Gravatar matthew

@mike I didn't bundle the source separately but you should just be able to look at the example and see the source by right-clicking.

Gravatar WEB 3.0 » Blog Archive » ¿Así que querías saber de CSS?

[...] Vertical Centering with a Shiv Div – Matthew Tretter [...]

Gravatar webweaver

Woah! Perfect!

Firstly THANK YOU – you've solved the losing-the-top-of-the-div issue that most of the other vertical centering solutions display when the window height is less than the centered div height. Clever clever clever.

You can also easily make #blueBox center horizontally as well as vertically if you want to. This gives you a div in the dead centre of the page.

To do this, add text-align: center; to the body tag in your css, and margin: 0 auto; to #blueBox. This centers the div in both IE and compliant browsers.

Gravatar darwin

thx for this great tips…this is what i'm looking for…i will try it :) ..

Gravatar bilevar

thx for this great tips

Gravatar MetalHand

Hey i am having a problem with the centering of divs, the example that u posted on top doesn't work for me now.

Do you know the reason why?

Gravatar Cascading Style Sheets Reference Links | kabayview.com

[...] Vertical Centering with a Shiv Div – Matthew Tretter [...]