Centering a block in another block

Minimal set, works in MSIE5+ (Windows).

The first block (A) has given height (200px). The second one (B) is relatively positioned to the middle of block A. The B's height is auto and its width mustn't be auto (due to an IE bug). The inner block (C) is relatively moved up by a half of its height. This makes block C to be vertically centered in block A. See source for the example code.

The content, the content, the content, the content, the content, the content, the content, the content, the content, the content, the content, the content, the content, the content, the content, the content...

Note: overflow:hidden is not important, it's just a good idea. However, overflow:scroll (or auto) shouldn't be used, it may produce weird things...

Buggy browsers

There is a bug(?) in NN6/Mozilla and MacMSIE5, causing the second percentual positioning doesn't apply. Another type of value works fine but percentage is ignored. It doesn't work even if we use absolute positioning for first two blocks. In plus, Moz/MacIE will display it in different ways with different DOCTYPEs. Opera calculates percentage relative to block's height, but this is wrong. It has to be relative to the height of block's parent (height of block's containing block). This Opera's bug cannot be hacked, I guess.

In Mozilla and MacIE, we can at least guess the height of the inner block and move it up by the half of this estimative height. However, this is just a semi-hack - obviously we don't know the height at all.

I guessed the height of this content may be typically 6em. Then I moved it up by a half of it (-3em)... the content, the content, the content, the content, the content, the content, the content, the content...

Some examples

The content is centered in both directions...

The content is aligned to the bottom by positioning +100% (block B) and -100% (block C)...

Petr Stanicek, aka -pixy-

www.pixy.cz