Comments on: Vertical Centering with a Floated Shim

By: caleb

caleb — Mon, 02 Jun 2008 01:24:59 +0000

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!

By: mcsdwarken

mcsdwarken — Mon, 28 Apr 2008 15:02:41 +0000

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

By: Jedidiah

Jedidiah — Tue, 01 Apr 2008 20:55:43 +0000

I get it now, vertical not horizontal.

Sorry having a slow day.

By: Jedidiah

Jedidiah — Tue, 01 Apr 2008 20:53:45 +0000

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.

By: Emo Saloy

Emo Saloy — Fri, 30 Nov 2007 21:10:13 +0000

Thanks and greeting from Uzbekistan. This “hack” was very helpful

By: vijay kumar

vijay kumar — Wed, 12 Sep 2007 11:46:51 +0000

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/

By: sarav

sarav — Sat, 01 Sep 2007 18:02:59 +0000

Good one

By: insankaynakları ilanı

insankaynakları ilanı — Sat, 18 Aug 2007 07:29:27 +0000

thanks…

By: matthew

matthew — Wed, 15 Aug 2007 02:35:16 +0000

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

By: Mike Edwards

Mike Edwards — Tue, 14 Aug 2007 13:47:30 +0000

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?