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.
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.
fahrvergnuugen - cheers. The generation of the css is done by concatenation of 'default' properties with specifics, so there is a lot in there that you should be able to dispense with if you are looking for Safari's problem. For a start, the z-indexes are not serving any function in this example.
<!-- --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a class="user" href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>"&gt;&lt;html xmlns="<a class="user" href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"&gt; <head> <title></title> <link rel="stylesheet" href="vcexample.css" type="text/css"> </head> <body> <div id="waxpadhangerwaxpadautoid1" class="waxpadstylehook"> <div id="waxpadvertcasewaxpadautoid1" class= "waxpadstylehook"> <div id="waxpadvertpropwaxpadautoid1" class= "waxpadstylehook"></div> <div id="waxpadvertseedwaxpadautoid1" class= "waxpadstylehook"> <div id="waxpadautoid1"> This is div is centered both horizontally and vertically, without the use of tables.<br> <br> Note that the top left corner of this div does not disappear when the window is smaller than this div is. <a style="color: rgb(150,150,255);" href= "waverticalcentering">Back to article</a>. </div> </div> </div> </div> </body></html>
Yes, transfire, you are missing something. CSS can do this just fine. The problem is that not all advanced CSS is implemented in today's common browsers. Especially IE is a problem, that's why we need hackish solutions in the real world. So the W3C goes forward, but browser programmers (especially Microsoft) lag behind.
Might I add:4. The example page is in quirks mode - empty comment tags before the doctype? WHY?The phrogz example I linked to works across all browsers.Plus, vertical centering without tables has been known about for years?
Great stuff, pikerust! Yours is the only CSS solution that not only accomplishes horizontal and vertical centering of a fixed-sized element, but does so without *ever* losing the top or left sides of the element. It's amazing reading through the comments how many other people (only a handful excluded) missed this major point. This is *not* the same as previous solutions.As a matter of fact, none (not one!) of the examples posted here does what pikerust's CSS construct can do. Anyone can do vertical centering with CSS... the various tricks to do this have been known for years. Doing the centering while preventing the element from disappearing off the top or left side of the browser window... well, as far as I know, this is the *only* known solution so far. I challenge someone to find a simpler, pure CSS solution that works in all major browsers and does not resort to using table styles or hard-coded offsets. Right now, there aren't any others.
The div height is relative to the window height (and thus will shrink to zero as the browser window shrinks to zero), and is thus not generally useful for holding content.
Like what? There is no other, simpler way to do exactly this. The other supposedly equivalent examples cited in this article fail to clamp the element within the bounds of the browser window, which pikerust's method achieves.
azmoviezMar 16, 2006
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.
ashtoniumMar 16, 2006
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.
pikerustMar 16, 2006Submitter
fahrvergnuugen - cheers. The generation of the css is done by concatenation of 'default' properties with specifics, so there is a lot in there that you should be able to dispense with if you are looking for Safari's problem. For a start, the z-indexes are not serving any function in this example.
basvdMar 16, 2006
Not new and not something that I would call 'proper'...
theredfistMar 16, 2006
Nice, very nice, even manages to let me resize my text without goin all to hell.
thinkdrasticMar 16, 2006
The only problem with yours is that when the text gets too big, it goes off the top/left of the page and cannot be reached :(
yugiohdan6Mar 16, 2006
<!-- --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a class="user" href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>"&gt;&lt;html xmlns="<a class="user" href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"&gt; <head> <title></title> <link rel="stylesheet" href="vcexample.css" type="text/css"> </head> <body> <div id="waxpadhangerwaxpadautoid1" class="waxpadstylehook"> <div id="waxpadvertcasewaxpadautoid1" class= "waxpadstylehook"> <div id="waxpadvertpropwaxpadautoid1" class= "waxpadstylehook"></div> <div id="waxpadvertseedwaxpadautoid1" class= "waxpadstylehook"> <div id="waxpadautoid1"> This is div is centered both horizontally and vertically, without the use of tables.<br> <br> Note that the top left corner of this div does not disappear when the window is smaller than this div is. <a style="color: rgb(150,150,255);" href= "waverticalcentering">Back to article</a>. </div> </div> </div> </div> </body></html>
lokeanMar 16, 2006
Yes, transfire, you are missing something. CSS can do this just fine. The problem is that not all advanced CSS is implemented in today's common browsers. Especially IE is a problem, that's why we need hackish solutions in the real world. So the W3C goes forward, but browser programmers (especially Microsoft) lag behind.
ignorantcowMar 17, 2006
1. Unformatted source code.2. Too much empty filler DIV tags.3. Too much unnecessary CSS.Below: A very much better example, with minimal code + neat source for those of us who can actually READ CODE.<a class="user" href="http://www.phrogz.net/css/valign_in_body/content.html">http://www.phrogz.net/css/valign_in_body/content.html</a>
ignorantcowMar 17, 2006
Might I add:4. The example page is in quirks mode - empty comment tags before the doctype? WHY?The phrogz example I linked to works across all browsers.Plus, vertical centering without tables has been known about for years?
kodiatJul 22, 2006
What do you think about this?<a class="user" href="http://vmalek.murphy.cz/victorias-vertical-centering-test-page.html">http://vmalek.murphy.cz/victorias-vertical-centering-test-page.html</a>Only one div tag
traycerOct 15, 2006
Great stuff, pikerust! Yours is the only CSS solution that not only accomplishes horizontal and vertical centering of a fixed-sized element, but does so without *ever* losing the top or left sides of the element. It's amazing reading through the comments how many other people (only a handful excluded) missed this major point. This is *not* the same as previous solutions.As a matter of fact, none (not one!) of the examples posted here does what pikerust's CSS construct can do. Anyone can do vertical centering with CSS... the various tricks to do this have been known for years. Doing the centering while preventing the element from disappearing off the top or left side of the browser window... well, as far as I know, this is the *only* known solution so far. I challenge someone to find a simpler, pure CSS solution that works in all major browsers and does not resort to using table styles or hard-coded offsets. Right now, there aren't any others.
traycerOct 15, 2006
The div height is relative to the window height (and thus will shrink to zero as the browser window shrinks to zero), and is thus not generally useful for holding content.
traycerOct 15, 2006
Like what? There is no other, simpler way to do exactly this. The other supposedly equivalent examples cited in this article fail to clamp the element within the bounds of the browser window, which pikerust's method achieves.
traycerOct 15, 2006
Works fine here with the text scaled up or down in Firefox...
phmfthacimMay 21, 2007
yea might as well just use tables