fantasai wrote:
>
> GJK wrote:
> >
> > Good point. However, CSS 1 still does not appear to make allowance
> > for vertical centering, and neither does Mozilla. I'm still reading
> > through CSS 2, but as its' spec is quite different I'm as yet unclear.
> >
> > For example, in the following code example...
> >
> > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
> > "http://www.w3.org/TR/REC-html40/loose.dtd">
> > <html>
> > <head>
> > <title>Centering Using Margins In CSS 1</title>
> > </head>
> > <body style="width: 100%; height: 100%; background-color: blue; margin:
> > 0;">
> > <div style="background-color: red; width: 100px; height: 100px; margin:
> > auto;">
> > </div>
> > </body>
> > </html>
> >
> > ...the block div element is horizontally centered, but not vertically.
>
> In vertical margins, a value of auto on a block becomes 0.
> http://www.w3.org/TR/REC-CSS2/visudet.html#q17
This is true. So the answer is to make it an absolutely positioned
block, so the equation will be solved for margin-top and -bottom.
In which case, everything else (top, bottom, and height) must have
non-auto values.
so -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Centering Using Margins In CSS 2</title>
<style type="text/css">
body {position:relative; height:400px; border:thick solid green}
div {position:absolute; top:0; bottom:0; left:0; right:0;
background:red; width:100px; height:100px; margin:auto;}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
centers the DIV in the 400px high BODY.
(note: {position:relative} establishes the BODY as the containing block)
However, to center with respect to the viewport, one could make the
element {position:fixed; height:100% width:100%;} instead.
But it also appears to be the case in Mozilla that, where the containing
block for an absolutely positioned element is the initial containing
block (established by the root HTML (_not_ BODY) element), a percentage
height will be calculated as a percentage of the viewport height.
(I don't see this in the spec yet, but rumour has it that it may be a
future change.)
So, to center it vertically in the viewport
- either make it fixed position,
- or position it absolutely, and ensure that the containing block
either is the initial containing block, or has been positioned
absolutely with respect to the initial containing block.
Thus, for example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Centering Using Margins In CSS 2</title>
<style type="text/css">
body {background:blue;}
div {position:absolute; top:0; bottom:0; left:0; right:0;
background:red; width:100px; height:100px; margin:auto;}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
will center the DIV with respect to the viewport, and so does
div {position:fixed; top:0; bottom:0; left:0; right:0;
background:red; width:100px; height:100px; margin:auto;}
Hope that clarifies more than it obfuscates :)
--
Regards,
Val Sharp - Edinburgh
