Centering Blocks

A common request is the ability to center blocks. CSS has some capabilities for this, however they are very limited, especially in the vertical direction.

Horizontal centering can be accomplished in most cases by using margin: 0 auto: setting both the left and right margins to auto causes them to be equal. There are some limitations however.

• Centering with margins doesn't inherit, so can't be used to implement <CENTER> functionality.
• Centering with auto margins can't be combined with side margins.
• Auto margins can't center an element that is larger than its containing block: in that case it aligns to the “start” edge to avoid overflow in that direction (which could cause awkward scrolling conditions).
• Centering with 'auto' margins is pretty non-obvious.

Ian and Tantek have a position:center proposal that does both horizontal and vertical centering. It uses the background-position method of calculating positions and applies it to the absolute positioning model. It gives a lot of flexibility in placing boxes relative to their containing block, but is a form of absolute positioning and can't be used for in-flow boxes.

Markus started a discussion about an alignment property to standardize on syntax to implement <CENTER>. The property affects the alignment of boxes, not of text within the boxes, and it inherits. Unsettled details include:

• Whether the property affects the element's alignment within its parent or its descendants' alignment within itself. Proposed that it should affect the element.
• What alignment possibilities are represented as values. Proposed that the left/center/right/start/end set be adopted.
  • One set: left | center | right
  • Another set: left | center | right | start | end
  • A more complex set that includes top and bottom values that apply in vertical layout. (Such a set should allow specifying e.g. both top and left at the same time, where one takes effect in vertical text and the other in horizontal text.)
  • Any of the above sets with percentages as an added possibility.
• What the property is named. alignment is the working name. An alternative would be horizontal-align, to be consistent with vertical-align.
• Whether alignment triggered by this property is “true” alignment, or if it only affects blocks smaller than their containing block.
  • If the property triggers “true” alignment, then a value that triggers current behavior must be the default. The disadvantage of this is that most authors will not realize use of this property can cause their content to become inaccessible in some window configurations.
  • If the property does not trigger “true” alignment, then an additional keyword (or several keywords) could be defined to trigger true alignment (e.g. alignment: left vs. alignment: true left). In this case both alignment behaviors are possible, and the default behavior emphasizes accessibility.
• How this alignment interacts with the current margin calculations. Possibilities include:
  • alignment trumps auto margins: auto margins are set to zero and then the box is aligned as specified.
  • alignment defers to auto margins: it only affects blocks without auto side margins. (Note that the default margin is '0'.)
• How alignment interacts with specified margins
  • alignment replaces specified side margins with auto as appropriate to effect specified alignment
  • alignment shifts the margin box, leaving specified margins intact

Vertical centering currently cannot be done in CSS except for

• absolutely-positioned elements (using margin: auto)
• contents of table cells

The main request is to vertically center the contents of a box, as can be done with vertical-align: middle on table cells. A secondary request is the ability to vertically-justify content within its containing block.

Ian and Tantek have a position:center proposal that does both horizontal and vertical centering. It uses the background-position method of calculating positions and applies it to the absolute positioning model. It gives a lot of flexibility in placing boxes relative to their containing block, but is a form of absolute positioning and can't be used for in-flow boxes.