Pro HTML5 and CSS3 Design Patterns

CHAPTER 9 ■ POSITIONING: ADVANCED

Middle Offset

Problem

You want to align an element and its content to an offset from the vertical middle of its

closest positioned ancestor.

Solution

To create a middle-offset sized absolute element, you can use the Middle-aligned

Sized Absolute Element pattern and set top to the desired offset and set bottom to the

inverse of the desired offset.

To create a middle-offset stretched absolute element, you can use the Middle-

aligned Stretched Absolute Element pattern and add the desired offset to margin-top

and subtract the desired offset from margin-bottom.

An inline element can’t be middle-offset.

A static element can’t be middle-offset.

A shrinkwrapped element can’t be middle-offset.

Patterns Middle-offset sized absolute element

SELECTOR { position:absolute; height:+VALUE;
margin-top:auto; margin-bottom:0;
top:±VALUE; bottom:±VALUE; }
where top = top + OFFSET and bottom = bottom – OFFSET

Middle-offset stretched absolute element

SELECTOR { position:absolute; height:auto;
margin-top:±VALUE; margin-bottom:±VALUE;
top:0; bottom:0; }
where margin-top = margin-top + OFFSET
and margin-bottom = margin-bottom – OFFSET

Location This pattern works only on absolute elements.

Limitations

Internet Explorer 6 can’t middle-align absolute elements. Version 7 can middle-align

stretched absolute elements but not sized absolute elements. Both issues have been

resolved in versions 8 and 9.

Example

This example is the same as the middle-aligned example, except it’s offset by 60 pixels.

The first two divisions are sized absolute elements. I offset them from the middle by

setting top to an offset of 60 pixels and bottom to the inverse offset of –60 pixels. The

last two divisions are stretched absolute elements. I vertically centered them by

assigning them to a margin-top and margin-bottom of 90 pixels. I then offset them

from the middle by adding 60 pixels to margin-top to create a value of 150px, and

subtracting 60 pixels from margin-bottom to create a value of 30px.

Related to

Center Offset, Top Aligned, Bottom Aligned; Static, Absolute (Chapter 7); Sized,

Shrinkwrapped, Stretched (Chapter 5)