Vertical Centering with a Floated Shim
Tuesday, January 24th, 2006Lots of designers have used this trick to vertically center blocks of known size in browser windows but, as Jon Hicks points out, some content may be cropped if the browser window is too small. Though it requires a little extra markup, my solution addresses this problem by positioning a shiv shim instead of the content itself.
The purpose of this technique is to center blocks of known height in the browser window. In the example file, the blue rectangle should be centered, not the text inside of it. It has been successfully tested on Safari, Firefox, Opera, and
Internet Explorer versions 5 through 7 on PC.
The example file is here . The source should explain it all.