digg

Does this conform to W3C standards? Or is it a CSS hack?

If it conforms then great work! I've been looking for something just like this.

cool, but is waxpad close? I can't seem to get it to do anything!

Doesn't work on Safari. Blank page...

ha ha, I have an adbocker that screwed this up.

id="waxpadvertpropwaxpadautoid1"
id="waxpadvertseedwaxpadautoid1"

Both of these have the word "advert" in it.

for those who are lazy: http://www.waxpad.com/articles/vcexample.css

This looks great, I only wish that you didn't need all those extra containing div's.

doesn't work in konqueror either

Yeah, I was doing this two years ago. Only, I can do it in a lot less:

body
{
margin: 0px;
background: rgb(150,150,255);
}
#waxpadautoid1
{
position:absolute;
height:200px;
width:200px;
top:50%;
margin-top:-100px;
left:50%;
margin-left:-100px;
background: rgb(175,8,8);
font: bold 80% verdana;
color: white;
}

you've got a lot of unnecessary code in that version.

Minimum width / height not working in Firefox (works in IE). If you wanted to center a block that is bigger than the veiwport, the text would be clipped.

Uhm, how is this new? I think I've seen CSS centering tricks without tables long before this...

jesus christ ... this has been around for ages.

Didn't bluerobot.com do something like this? I'll Digg it, though, just because I can!

This is a pretty standard vertical centering hack forcing IE into quirks mode.

doesnt work in firefox

works ok in opera ... unlike this site.

ummm, Dave Shea has the same thing over at Mezzoblue on his SXSW panel page, outlining the problem and a few solutions to it, much easier to implement than this, but it requires the use of a container DIV, I believe. unfortunately, I can't seem tof ind the link in my feed reader

Why would you use a table to center non tabular data formats anyway? Too much extra work. Do it right the first time.. lower/easier maintenance over time.

I reported this story as inaccurate because there's nothing proper when it doesn't show up in Safari. Sorry, nice try but no digg.

Doesn't work in safari.

I think you uploaded this page in binary because the code is all on a few lines, can you upload it in acsii so it's more organized?

Thought I would add this too:

"Since Internet Explorer does not resize px-sized text when it changes the text size of a page, but Firefox does, the principle that a page should behave the same way in both browsers demands that one never use px-sized text. But using em-sized text with non-auto px-sized containers means that the page will break above a certain browser text size, as the words become too long to fit the width of their container. The solution to this problem is the use of em-sizing for all elements."

That's just wrong. You SHOULD use both px size and line-height on certain elements to prevent them from being enlarged by the browser (at least in IE), because of their potential to break layout, say, if they were in the header area or near a graphic menu.

why is it here?

Open it in Firefox, scale the font size up and... ah, not so bulletproof is it?

The technique goes to hell if a user increases his font size. There's a great book out called Bulletproof Web Design by Dan Cederholm, (or something) that addresses issues like this. I just built my first website using his techniques and I must say its pretty cool...allows the user more control. If someone is visually impaired and needs to view the text a bit larger than what you've set, your design should allow for that and expand as needed. (Granted my personal website falls all to hell as well, but whose got time to fix their own site when they're always working for other folks.)

...***** looks like some folks beat me to it...heh

I've done this at least 3 years ago, and much more simply: http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm

Certainly nothing new, and certainly not something pikerust developed.

The author keeps burying the posts he doesn't like ... Get this ***** off the front page. This isn't something new. It's lame and doesn't work in all browsers.

I do the same thing at my website

http://www.dorseygraphics.com

Old hack, and not even well implemented; doesn't scale with fonts and can't be viewed in a standards compliant browser.
The idea of web standards are to eliminate ALL unnecessary markup from the document, including the CSS part. Since this is technically a behavior (positioning of the content relative to the viewport size), why not implement it with UO Javascript? Doing so would allow it to degrade far better than the CSS version, and would make it work in all modern browsers.
XHTML will eventually (2.0ish) remove all behavior from the standard, as such we should begin evolving these techniques now.
To me having this much CSS for such a small trick is no different than using invisible 1px gifs to hold open a table. BAD MARKUP, BAD! No Digg!

Oh, my method fixes the font resizing issue, too. :)

You know, I get a lot of flack for saying this, but I'm right. There's absolutly nothing wrong with using tables in xhtml for doing layout. In most real-world cases, development time is less, the code-weight is lower, and it's going to work in more browsers with fewer quirks and hacks. Tables work in Safari. :)

The HTML document is only a means to serve your content from your database or CMS to the client browser -- it should not be a means of storage for the content.

Ick. That's pretty messy.

This effect required three nested div's - not a HUGE improvement over using a Table IMO.

hmmm, div soup!

I get absolutely nothing but an ugly purple page. FF 1.5

I'm sorry to sound like a ***** here, but I've been doing this for almost 3 years now, it's just a case of offsetting the divs top left corner to extreme bottom right corner of the page (so it's not visible without scroll bars, and then reducing it's left and top properties to -50%, if I remember correctly.
= P

While I digg this, it doesn't work on IE 5 Mac, which a large number of unknowing Mac OS X users still use! I have gotten vertical centering working with some CSS hacks (like the backslash comment hack), and that still appears (sadly) to be the best way.

Three nested divs and a stew of CSS big enough to feed a family of four. NO THANKS.

I'm not trying to be a dick, but just use a goddamn table. It works. You're done. Next project. Why punish yourself with this nonsense.

Unlike anyone else's examples throuout this thread, the main example stops at the top and left; not hidden when doing an extreme resizing.

Not to say that it's more efficient but it's different than any example given as proof that this is an old CSS trick.

No digg, very compliacted for what it does, there are better ways that are more browser compatible.

Am I missing something? Doesn't it seem ASTRONOMICALLY IDIOTIC that the most commonly used screen layout techonology (html/css) has touble centering an element vertically? And we get gitty an finding some aweful hack to pull it off? I sware for every step forward, the w3c makes two steps back, and more "programmers" seem to enjoy it.

Why on earth put all the markup on one line? It's impossible to read.

Too bad no Safari support, I can't check it out... No Digg Yet.

Why do you need the four "waxpadstylehook" and "waxpadvertcasewaxpadautoid1" nested divs? You could achieve the same effect with the one center div and the body style treatment.

There are so many solutions to this, both hacks and compliant. This is in no way new or revolutionary, and seems like it's just meant to promote "waxpad", either that or the author just didn't research enough to find all the existing solutions.

Thanks. I have fooled with this in the past but never got serious enough to go beyond what MattLat did. This one is going into my code snippets, for sure.

Holy crap just use line-height :o

Does IE7 beta have fixes for vert aligning s or the ?

Why not just tell the container (div, p , whatever) to behave as a table. Older browser be damned :P