Impossiblue

The secret six

Knowing the height of an element in an HTML-document is a luxury we are seldom blessed with. Text, for instance, shrinks and expands … and changes. Consequently, centering content on a page or in a container poses problems. Clever solutions have been suggested over the years and during the evolution of CSS, our main tool for page layout. Two methods, however, I keep close to my heart, eh, web site.

CSS3+

Consider the Japanese flag: The rising sun is centered both horizontally and vertically inside a white rectangle. When all dimensions are known, this can be accomplished with one div (the circle) inside another (the backdrop)…

Fig. 1. Centering the sun when dimensions are known. Note: The circle has been created with pure CSS, but could just as well have been an image with known dimensions. (Refer to the page source for code.)

…or with a pseudo-element (the circle) dropped on top of a parent (the backdrop):

Fig. 2. The sun as a pseudo-element on a backdrop.

When new attributes were added to CSS3, arithmetic calculation methods were built in to a certain extent. This opened up possibilities when working with unknown dimensions (i.e. dimensions unknown to the web developer as per the interactions of the user of a web page).

Using the transform property in combination with translate values, it is possible to accomplish the task set above with no up front knowledge of the dimensions of the sun. (The browser can fetch them behind the scenes.)

The transform property lets you rotate, scale, skew, or translate an element. (MDN)

The translate() function repositions an element in the horizontal and/or vertical directions. (MDN)

Referring to the page source code for the next example, one might argue that the dimensions are known, but they are not used in the CSS declaration. The browser does the hard work.

Fig. 3. A CSS sun transformed.

Below is the same transform/translate combination used on an image positioned inside a div tag.

Fig. 4. A sun image transformed.

The bare-bones code to make it happen:

<div>
	<img src="...">
</div>

div { position: relative; }
img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}

This works equally well for textual content:

Limitation: Only transformable elements can be transformed. That is, all elements whose layout is governed by the CSS box model except for: non-replaced inline boxes, table-column boxes, and table-column-group boxes. (MDN)

Scatter to the four winds

Prior to CSS3, non-semantic hacks were often employed to center elements. Another method, though not universally known, is easy to remember and still functional (except for one small problem). It goes like this:

<div class="mother">
	<div class="daughter">...</div>
</div>

.mother { position: relative; }

/*	The secret six */
.daughter {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	}

This is not a hack. Really! It is only a little discomforting; not playing exactly by the rules. The inner element is told to go both north, east, south, and west. Only the margin property can let the browser (sort of) satisfy all the directions equally. I call it The secret six.

Now, the problem mentioned rears its head with text, visualized with a dotted outline below:

The text insists on full height, no vertical margins. This is actually the browser playing by the rules. margin: auto is useful for horizontal centering, but has no effect vertically. There really is no excuse for hacking a solution like vertical-align-middle in paragraphs displayed as table cells and whatnot. It would be like walking backwards into the future. CSS has moved on and we should hurry after. In this use case, transform rules. I still could not forget my six friends, however, so more for historical reasons, below is a link to a full-blown demo page with an image. Play with the width and height of the browser window.