Centring elements horizontally and vertically with the CSS3 calc() function

Another month arrives and more CSS3 comes into play. March was witness to calc() being incorporated into the Webkit engine.

I wrote back in January 2011 about the calc() function and stated it would be one to watch in the future:

I can guarantee that you will see a multitude of articles written about this function in the coming years. It will be particularly useful when a number of new CSS3 units such as viewport height and width come into play, and when the use of the attr() function is expanded upon.

Now that it has been incorporated into the Webkit engine the time of calc() has arrived, and one critical use will be the horizontal and vertical centring of page elements.

To briefly summarise calc(), it allows mathematical equations to be used in style sheets. So the basic mathematical operators are permitted and, importantly, so is the mixing of value types. As an example, the following is permissible:

calc(50% - 20px);

Its key benefit will be to responsive design as it allows for better control of fluid layouts.

As a demonstration I'll centre an image on a page. The dimensions of the image is 320 x 305.

The first part of the calculation reads as so:

img {
position : absolute;
 top: calc(100% - 50% );
 left: calc(100% - 50%);
}

That is 100% or the parent container's height and width minus 50% of this figure. It is not necessary to specify the height and width of the parent container in the HTML or CSS as the browser calculates this.

The image is now semi-centred but it does so on its top and left axis.

We need to take the image dimensions into consideration:

img {
position : absolute;
 top: calc(100% - 50% - 305px);
 left: calc(100% - 50% - 302px);
}

Almost there, but we need to evenly distribute the image dimensions across all axis' like so:

img {
position : absolute;
 top: calc(100% - 50% - (305px / 2));
 left: calc(100% - 50% - (320px / 2));
}

Perfect! Now make sure the browser prefixes are present:

img {
position : absolute;
 top: -moz-calc(100% - 50% - (305px / 2));
 left: -moz-calc(100% - 50% - (320px / 2));
 top: -webkit-calc(100% - 50% - (305px / 2));
 left: -webkit-calc(100% - 50% - (320px / 2));
 top: calc(100% - 50% - (305px / 2));
 left: calc(100% - 50% - (320px / 2));
}

Lets see the above code in action.

Centring elements on a page like this is only possible if you know the dimensions of the object you wish to centre.

At the time of writing, calc() works in Firefox and Internet Explorer versions 9 and above. It is now a part of Webkit but has yet to filter out to Chrome or Safari.

calc() will become even more user-friendly once the attr() function is expanded on. We could then use code that looks like this:

img {
position : absolute;
 top: -moz-calc(100% - 50% - (attr(height) / 2));
 left: -moz-calc(100% - 50% - (attr(width) / 2));
 top: -webkit-calc(100% - 50% - (attr(height) / 2));
 left: -webkit-calc(100% - 50% - (attr(width) / 2));
 top: calc(100% - 50% - (attr(height) / 2));
 left: calc(100% - 50% - (attr(width) / 2));
}

As I wrote above, the main beneficiaries of calc() will be the responsive design crew but it's just as useful on the desktop.

Now it's over to you, dear coder, to see what other uses calc() can bring to the CSS-using masses. Report back!