Previous Message
Next Message

Vertical Centering

Sent by ~davidLaakso on 23 March 2006 15:03


Tom Livingston wrote:
> I recall someone posting a very easy method of vertical centering a
> block in a viewport a while back. ...]
> Tom Livingston
>
>   
Three replies to the same question a couple of days ago:

1/ #body {margin: 2px 0px 0px 0px;text-align: center;background-image: url(images/background.png);
	}
 #container {margin: 0 auto;width: 763px;background-image: url(images/back.png);background-repeat:
no-repeat;background-color: #ffffff;display: table;}
Set the container width and min-height in %. and add html, body { 
height: 100%; }  IE doesn't know 'display: table;' or min-height, so it 
is already being left out of the vertical centering party.  Most of the 
time, vertical centering turns out to be useless because web pages tend 
to get longer over time.  As soon as you have to scroll the vertical 
centering effect is gone (and if you do it wrong, content disappears 
out the top of the viewport).  In short I wouldn't worry about it too 
much.
Roger Roelofs

2/ Possible, but difficult-- and not user friendly. To stay centered 
vertically at 800 the height needs to be around 380px or less. Centering 
vertically, at any screen resolution, is dependent on user top and 
bottom window chrome. The height of the window varies wildly on my 
browsers. Compensating for probable font zoom is really tough(zoom the 
fonts on your current layout). Mostly one is better off taking advantage 
of the vertical fluidity of the Web, and the vertical canvas, by /not/ 
restricting height. That being said, this is one method for centering 
vertically and horizontally: <http://dlaakso.com/center-stuff.html>.
~davidLaakso

3/ Note that if the window is shortened enough the top of the centered 
box gets cut off and cannot be scrolled to. I agree with David and Roger 
-- don't bother with vertical centering.
Zoe


Regards,
~davidLaakso



-- 

Typography exists to honor content. 
--Robert Bringhurst
<http://www.dlaakso.com/>

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread:

Possibly related: