Centering

One moment in time you will find yourself asking "how do i center an element?"? The answer to that question depends on whether you want to center an inline element or a block element.

In this tutorial i will show you the various techniques you can apply. Let's start with block elements.

Know your numbers

If you want to have a block element like a div element, to be in the center of your page you need to know the height and/or the width of that element (depends on if you want the centering to be only horizontally, vertically, or in both directions).

There are several techniques for centering a block element. All of them depend on whether you have the size set in percentages or in more absolute values.

Percentages

This technique is the most simple centering method. The following example is for horizontal centering, but you can also apply it to vertical centering.

You know the width of the block you want to center, say 30%. If you want to center this block, you need to position it half the space that's left from the edges. This means you have to move the block a certain amount of % from the left or the right.

To know how far, you apply this formula:
(100% - width of the block)/2.

In this case that will give you 35%.
Why 35%? Simple: (100% - 30%)/2 = 70/2 = 35%

Let's make it clear with an example where the box has a width of 40% and a height of 30%. The box needs to be centered both horizontal and vertical.

.centerelement {
   position : absolute;
   width : 40%;
   height : 30%;
   left : 30%;
   top : 35%;
}

The left value for the horizontal centering is derived from following formula:
(100% - 40%)/2 = 60/2 = 30%

The top value for the vertical centering is derived from following formula:
(100% - 30%)/2 = 70/2 =35%

Of course, if you leave out position : absolute; the box will be placed in the top left corner of the viewport instead of being centered.

Absolute sizes

This is a little bit more sophisticated. Like with percentages it also applies for vertical centering.

You need a fixed width for the block, let's say px. You first move it 50% to the left so the left side of the box will be in the center.

The second step is to move the box half the width of the block. To achieve this, you use negative margin's so the box moves in the opposite direction.

The formula you use is: (width/2) = negative margin

Let's make it clear with another example where the box has a width of 300px and a height of 350px. Again, the box needs to be centered both horizontal and vertical.

.centerelement {
   position : absolute;
   width : 300px;
   height : 350px;
   left : 50%;
   top : 50%;
   margin-left : -150px;
   margin-top : -175px;
}

From where do the numbers come from?

You want the block centered horizontal and vertical, so you need to move it 50% to the left and from the top so the left and top side is in the center.

To move it in the opposite direction you apply the formula which gives you the horizontal moving:

300/2 = -150.

For the vertical moving it gives you 350/2 = -175.

The drawback with this technique is that the negative left margin will cause the left side area of the element inaccessible in narrower browser windows (like Mozilla).

auto-margins

This is my preferred method of CSS centering. It works with either absolute or percentage widths. If you want to center an entire page's contents it's the method to use.

Unlike the 'absolute sizes' method above, this technique should prevent negative left margins from making the left-side area of the element inaccessible in narrower browser windows.

This method makes advantage of one of the CSS specs.
The Visual formatting model details states that if both 'margin-left' and 'margin-right' are set to 'auto', their computed values are equal.

Again, an example paints a thousand words. Let us center an entire page's contents when contained within a 'wrapper' div 500 pixels wide:

body {
   text-align : center;
   min-width : 450px;
}

#wrapper {
   position : relative;
   text-align : left;
   width : 450px;
   margin-left : auto;
   margin-right : auto;
}

MSIE 5 doesn't center based on auto left/right margins, but text-align:center does center top-level divs, so you set the body with text-align: center;.

To prevent negative (i.e. inaccessible) left-margins in narrow browser windows (like Mozilla),you need to specify a min-width for the body as wide as the wrapper itself.
Hence the min-width: 450px;

To reset the alignment after the text-align:center on the body, you specify text-align: left; on the wrapper.
The auto margins will center the element in the containing (body) tag.

Centering Inline Content

Inline content includes such things as text, images, <strong> and <span>.
To centre inline content, use the text-align property and apply it to the block level container that holds the content inside that needs to be aligned.

<div style="text-align: center;">
 some image here
</div>

Although the text-align property is applied to the <div>, what gets centered is the image inside the div, not the div itself.

Another way to get the same result is letting the inline content behave as a block element and using auto margins:

 img {
   display : block;
   margin : auto;
}

Some more scribbles for you to look at.

More Pages

Links to other parts of the site.

Friends

People who have been good enough to me that I would call them friends.

You can get your W3C stuff at the W3C site

The W3C Logo

It's has all the specifications you need, some tutorials and also validation tools. If you get into CSS you'll be needing this link !

Unless otherwise expressly stated, all original material of whatever nature created by Dzinelabs and included in this site and any related pages, including the weblog's archives, is licensed under The Creative Commons License.

The Creative Commons Licence logo