Part of the Page Layout Reading List

Seven Ways of Centering With CSS

Share onTwitterFacebookGoogle+

Centering HTML elements on a web page seems like it should be simple. In some cases, it is… but complex layouts often eliminate some solutions, leaving web developers working without a net.

Centering elements horizontally on the page tends to be easiest, with vertical alignment harder to pull off, and combining the two the most difficult of all. In the age of responsive design, we rarely know the explicit height or width of elements, eliminating many possibilities. To my count, that leaves at least six centering methods in CSS. I’ll start from the simplest and best supported and move to the most complex, working from the same basic code:

<div class="center">
	<img src="jimmy-choo-shoe.jpg" alt>
</div>

The shoe images will vary, but they will always have a native size of 500px × 500px. HSL colors are used for the backgrounds to keep a consistent color theme.

Horizontal centering with text-alignment

Sometimes the obvious solution remains the best option:

div.center {
	text-align: center;
	background: hsl(0, 100%, 97%);
}
div.center img {
	width: 33%; height: auto;
}

This doesn’t align the image vertically: you’d need to add padding to the <div> or margin-top and margin-bottom to its content to achieve that, leaving the container to gain its height from its content.

Centering with margin: auto

Again primarily for horizontal centering, with the same limitations as the text-alignment method above:

div.center {
	background: hsl(60, 100%, 97%);
}
div.center img {
	display: block;
	width: 33%;
	height: auto;
	margin: 0 auto;
}

Note the display: block, necessary in this case for the image to accept margin: 0 auto.

table-cell centering

Uses display: table-cell, rather than actual table markup; allows for both horizontal and vertical centering. Typically requires the addition and manipulation of a second, exterior element, which could be anything from a div to the body itself.

<div class="center-aligned">
	<div class="center-core">
		<img src="jimmy-choo-shoe.jpg">
	</div>
</div>

The CSS:

.center-aligned {
	display: table;
	background: hsl(120, 100%, 97%);
	width: 100%;
}
.center-core {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
.center-core img {
	width: 33%;
	height: auto;
}

Note that the width: 100% is required to stop the div from collapsing, and that the outer container will require some height in order to vertically center the content. Trying to vertically center the element in the body will also involve the standard trick of setting the html and body height. Works in all browsers, including IE8+.

Absolute Centering

A technique recently promoted by Stephen Shaw has very good support across browsers. The one downside is that some form of height must be declared for the outer container:

.absolute-aligned {
	position: relative;
	min-height: 500px;
	background: hsl(200, 100%, 97%);
}
.absolute-aligned img {
	width: 50%;
	min-width: 200px;
	height: auto;
	overflow: auto;
	margin: auto;
	position: absolute;
	top: 0; left: 0;
	bottom: 0; right: 0;
}

Stephen has demonstrated a number of variations of this code in his Smashing Magazine article covering the technique.

Centering With translate

A newer technique by Chris Coiyer that uses CSS transforms. Also supports horizontal and vertical centering:

.center {
	background: hsl(180, 100%, 97%);
	position: relative;
	min-height: 500px;
}
.center img {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 30%; height: auto;
}

Comes with a few downsides:

• CSS transform code will require vendor prefixes to work in older browsers.
• Won’t work in older versions of IE (version 8 and earlier)
• Outer container will need to have a set height (or gain it in some other way) as it won’t get any height from its absolutely-positioned content.
• If the content contains text, current browser compositing techniques can leave the translated text blurry.

Flexbox centering

Will probably become the centering solution of choice once the property variants and vendor prefixes have faded away.

.center { 
	background: hsl(240, 100%, 97%);
	display: flex;
	justify-content: center;
	align-items: center;
}
.center img { 
	width: 30%; height: auto;
}

In many respects flexbox is the simplest solution, but one that is held back by the variety of older syntaxes and lack of support in earlier versions of IE (although display: table-cell makes for an acceptable fallback).

Now that the spec has been finalized and browser support is settling down, I have written extensively on flexbox layout and its uses.

Centering With calc

More versatile than flexbox in certain circumstances:

.center {
	background: hsl(300, 100%, 97%);
	min-height: 600px;
	position: relative;
}
.center img {
	width: 40%;
	height: auto;
	position: absolute;
	top: calc(50% - 20%);
	left: calc(50% - 20%);
}

Very simply, calc allows you to do calculations based on the current layout of the page. In the simple calculations above, 50% is the halfway point in the container element, but using that alone would set the top left corner of the image to the center of the <div>. We need to bring that position back by half the width and half the height of the image. Expressing that in a longer form:

	top: calc(50% - (40% / 2));
	left: calc(50% - (40% / 2));

In current browsers you’ll find that this technique tends to work best on content with fixed, known dimensions:

.center img {
	width: 500px; height: 500px;
	position: absolute;
	top: calc(50% - (300px / 2));
	left: calc(50% - (300px – 2)); 
}

The technique has many of the same potential drawbacks as flexbox: while it has good support in modern browsers, it will require vendor prefixes for earlier versions, and has no support in IE 8.

.center img {
	width: 40%; height: auto;
	position: absolute;
	top: calc(50% - 20%);
	left: calc(50% - 20%);
}

While there are still more options such as using pseudo-elements for vertical alignment, understanding these six techniques will give any web developer a solid repertoire to draw on when centering elements.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.