How to centre a div, and other CSS centring tricks


If you're just starting out with CSS, there are several problems that may be a mystery to you. Centring a div is one of these problems. In fact, there are several things you might want to centre with CSS. This article will cover centring a containing div, centring images and tables, centring a div vertically, and centring a background image.

Note: CSS uses the American spelling of centre (center).

How to centre a div

If you are creating a fixed width layout, one of the first things you will want to do is centre your layout in the browser window. You may attempt to use text-align: center to get your layout to align correctly, but this doesn't work (text-align: center does not work on block level elements, only inside them). You could also try to find a way to float the div to the centre (since this is the way you align items left or right).

The trick to centring a div is to use margin: auto on the left and right sides. 

The beginnings of a basic page structure in HTML: 

<div id="wrapper">
  <h1>This is the content</h1>
</div>

The CSS to centre align a fixed-width containing div:

<style type="text/css">
body {
   background: #ccc;
}

#wrapper {
   width: 760px;
   margin-left: auto;
   margin-right: auto;

   background: #fff;
}

</style>

I've added a grey background colour so you can see the div alignment. Of course, you can also combine the margin properties into one declaration, like this:

#wrapper {
   width: 760px;
   margin: 0px auto;
   background: #fff;
 }

See this technique in a separate html file.

How the value of "auto" is determined

You may be wondering why setting the margin to auto has the effect of centring the div. To understand this, we need to look at the CSS visual formatting model. It says that for block-level, non-replaced elements, the following equation must hold true:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

Non-replaced means HTML tags that aren't replaced with something else (e.g. images and form elements are replaced elements, divs are non-replaced elements).

This is a bit easier to understand if we look at a diagram:

When you specify "auto" as a value for a margin, the browser will automatically make that margin width fill the space between the border and the width of the containing block.

Consider what would happen if you only specified auto as a value for the left margin. In that case, the browser would calculate the value of auto to fill the space between the width of the div and the width of the containing block (the browser window) on the left side only. The right margin would be 0 by default. Can you figure out what the result would be in this case?

How to centre an image, table or any other element

To centre other elements, you can use the same technique as you would use to centre a div. If you need to do this often, it may be useful to create a class for this:

.centred {
   margin: 10px auto;
}

img.centred {
   display: block;
}

Adding display: block to the image is necessary because images are actually inline elements and the margin will not work unless they are displayed as block elements.

Applied to an image:

<img src="yourimage.jpg" height="200" width="350" alt="alternate text" class="centred" />

(Note: this isn't a particularly semantic class name, but there is no semantic purpose to be applied here. It is a purely visual layout effect and therefore a non-semantic class name is the only way to go).

See this technique in a separate html file.

How to centre a div vertically

Centring a div vertically on a page is a more difficult problem. There are four possible situations here, depending on whether you know the heights of the container and the centred box:

  1. you know the height of both the containing block and the height of the centred div
  2. you don't know the height of the containing block but you do know the height of the centred div 
  3. you do know the height of the containing block, but you don't know the height of the centred div
  4. you don't know the height of either the containing block or the centred div

The margin: auto trick used for horizontal centring doesn't work in any of these cases, so you need to try something different.

If you know the height of both the containing box and the centred box, you can just set the padding on the wrapper to half the height of the contents div. This will have the same effect as the margin: auto trick above.

See this technique in a separate html file.

If you don't know the height of the containing block, but you do know the height of the contents, you can use another absolute positioning trick. This would be the case if you were trying to vertically centre a fixed-height div in the browser window.

The key here is that absolutely positioned elements are positioned relative to their parent element. What we can do is move the containing div (the parent element) halfway (50%) down the window and set it's height to 1px. Then we can use positioning to move the contents div up by half its height.

See this technique in a separate html file.

If you do know the height of the containing block, but don't know the height of the contents OR, you don't know the height of either block, you can use the vertical-align property to centre align the contents vertically. Vertical-align can only be applied to elements with display: table-cell, so this only works in browsers that support display:table and display:table-cell (it does not work in Internet Explorer 7 or lower; there are some other tricks you can use to get this to work in older versions of IE).

See this technique in a separate html file.

How to centre a background image

Centring a background image is a different technique. Let's imagine that you want to place your centre aligned content div on top of a background image that provides a graphic border to the page. To centre align a background image, you simply need to set the background-position: property to center (or 50%). The background position property takes values for the horizontal and vertical position (if only one value is specified, the second one is assumed to be center). The following code centres a background image on the body tag:

body {
  background-image: url(background-image.png);
  background-position: center;
  background-color: #ccc;
  background-repeat: repeat-y;
}

The second value in the background-position property is not specified. Since we are repeating the background on the y axis, it doesn't matter how the background is positioned vertically.

With a condensed background declaration:

body {
   background: #ccc url(background-image.png) repeat-y center;
}

See this technique in a separate html file.

Discussion

To discuss, ask questions or comment on this article please see the Webmaster Forums discussion on How to centre a Div and other CSS centring tricks.

Resources

Megan McDermott's picture

About the Author

Megan is co-founder and editor of A Padded Cell and administrator at The Webmaster Forums. She has been designing websites since 1997, with expertise in design, information architecture, usability, HTML/CSS, Drupal theming, and more. Megan is also a partner and co-founder of Woolwich Web Works: A small team that can do big things!