demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Seven Ways of Centering With CSS

css / layouts

Estimated reading time: 6 minutes

Centering 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

Photograph of a classic Chuck Converse shoe

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

Photograph of a white classic Nike sneaker

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

Photograph of black Oxford calfskin shoe designed by Vivienne Westwood

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

Photograph of an Under Armour Micro G Toxic Six shoe

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

Photograph of a Jimmy Choo shoe

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 all 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

Photograph of a Manolo Blahnik shoe

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 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). The complete CSS:

.center { background: hsl(240, 100%, 97%);
display: -webkit-box;   /* OLD: Safari, iOS 6 and earlier; Android browser, older WebKit  */
display: -moz-box;      /* OLD: Firefox (can be buggy) */
display: -ms-flexbox;   /* OLD: IE 10 */
display: -webkit-flex;  /* FINAL, PREFIXED, Chrome 21+ */
display: flex;          /* FINAL: Opera 12.1+, Firefox 22+ */
 
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
 
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}

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

Photograph of a Christian Louboutin shoe

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)); }

I’ll discuss calc in depth in a future article. The technique has many of the same potential drawbacks as flexbox: while it has good support in Firefox from version 4, it will require vendor prefixes for earlier browser versions, and has no support in IE 8. The full code for the image would be:

.center img { width: 40%; height: auto; position: absolute;
top: -webkit-calc(50% - 20%); left: -webkit-calc(50% - 20%);
top: -moz-calc(50% - 20%); left: -moz-calc(50% - 20%);
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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.