Centering an element with unknown (shrink-to-fit) dimensions

Ed è subito sera

Salvatore Quasimodo

Ognuno sta solo sul cuor della terra
trafitto da un raggio di sole:
ed è subito sera.

This technique uses two relatively positioned wrappers (with auto (not specified) dimensions). The first (green) has top and left 50%, so its top left corner is in the center of the parent (gray). The second (red) has top and left -50%. Since it has the same size of the first one, it should have its center on the top left corner of the first, and so it should be centered in the gray grandparent.

The vertical part of the centering works only in IE7-. See the discussion 'relative positioning with percentages inside auto-height containing block does not work' at bugzilla.mozilla.org.

CSS tests home