any text any height
any content, for example generated from DB
everything is vertically centered
Once upon a
time there was an
octopus.
NOTE: The css for this all-<div> solution is complex because the element being
centered does not specify width or height. If you have a situation where
dimensions are known, you do not need such a complex solution. Likewise, if you
only need centering in ONE dimension, there are easier ways. Horizontal-only (hard case--floated
blocks & unknown width).
Also see
Css-discuss Wiki: Vertical & Horizontal Centering.
NOTE: IE7 does not support "display: table", so continues to use IE6 solution.
The hardest part was horiz-centering the inner div in valid CSS agent. This
required convincing agent not to expand table & cell width to 100%. Even when
set L & R margins to auto! Finally discovered that the problem was I was putting
width on table, which single cell insisted on filling horizontally. If wrapped a
div around the table to hold the known outer width, then the table shrinks to
the content width. Conversely, needed height on table, to force table to expand
to that height. What a mess! Also tough was in IE horiz-centering the inner div
when it was > 50% width of outer, without squeezing inner. Was able to make use
of a text-align bug to move left edge of table to 50% w/o squeezing.