[thelist] center page vertically with css

[Scott Schrantz]

> -----Original Message-----
> From: Joxn [mailto:joxn at vernum.com]
>
> Hey folks,
> all that CSS talk got me wondering if it is possible to center a page
> vertically with just CSS?
>
> I know that you can nest a table in a table - like they tell you on
> http://www.lumia.com/tips/centerpage.htm - but I'd like to get rid of
> that outer-table.
>
> margin: auto just centered the content horizontally and not
> as I wished vertically as well.

I don't think it's possible with CSS. The reason for this is that CSS has no
concept of where the bottom of the page is, much less the bottom of the
window. If you think of a web page, it has a definite left-side, right-side,
and top, all of which CSS is able to work with. But there is no definite
bottom - the bottom could go on for several screens, or it could stop just a
few pixels down the screen. height: 100% doesn't work in CSS, since it can't
anwser the question "100% of what?" In tests of IE6 and Mozilla 0.99,
height: 100% is just ignored. You can set height in pixels, but even with
that, margin-top:auto;margin-bottom:auto; doesn't work to center it. As far
as I know, there is no way for CSS to center vertically. The code in the
link you sent doesn't even work well, since support for height="100%" is
disappearing. The two newest browsers just ignore it, while NN4 supports it
but not much CSS.
With some complex JavaScript, you might be able to measure the height of the
window and plug those numbers into some kind of script, but that's beyond my
knowledge. I suggest you just stop worrying about it and move on, since I
don't think you'll ever find any cross-browser way of vertically centering
content.

Of course, and this is probably the closest you'll ever get using CSS,
there's always this to play with:
html {
border-top: 100px solid #000;
border-bottom: 100px solid #000;
}
body {
border-top: 100px solid #000;
border-bottom: 100px solid #000;
}
Try them both, separately. The first is my favorite, and the one place where
CSS does seem to know where the bottom of the window is. I can't get them to
work with percents, though.