CSS Positioning – Centering Elements

CSS is a powerful beast, and an essential part to any self-respecting website. With all this power, comes a lot of different tricks that one can employ to accomplish your tasks. Some of these tricks involve positioning your content, and today we are going to touch on that. For this tutorial we are going to reveal some of the best ways to center your content, wherever that content might be.

There are many different ways to center your content using CSS. Some are a bit more strait forward than others, but luckily they are all fairly simple to implement. By the end of this tutorial, you should be able to do something like this:

Centering Horizontally

One of the simplest ways you can center elements is using text-align: center on the contents wrapper. For example:

As you can see we are using the text-align property on both the content and the wrapper. This is because we center the text on the parent div which the inner div will inherent. So we have to realign our inner div text to the left. This is easy to implement, but not perfect.

We can actually use margins to horizontally center things as well. However, when using margins, we typically need to have a content container that has a set size. Sometimes you may even need to give your content wrapper an exact size as well. For this first example we are going with the worse case scenario:

As you can see we have to give both our wrapper and our container a width. However, since we know all the numbers, we can do a little bit of math to accomplish our goals. We take half of the width of the wrapper, which is 200 pixels, then subtract half of the content width. This gives us a margin of 150 pixels, which will center it completely. Though this is strait forward and guarantees that our content is centered no matter what width we make the wrapper, there is an easier way.

This method involves auto margins, which means that CSS will calculate the margins for us. In this case we still have to give our content container a width…but not our wrapper. This means that our wrapper can be any size we want. Also, we can us the top/bottom left/right margin shorthand as well.

This is typically the preferred method to center your content, but there is one issue. If you are looking for optimum compatibility, you will have to go with the text aligning method, as the automatic margins are not supported by every browser. Every modern browser supports auto margins, but just not older browsers.

If you really feel adventurous, you can try our last example of horizontally centering. It involves “relatively” positioning our content container, then shifting it a bit. Here is what it would look like:

Here we take our content and relatively position it. This allows us to use the left property to move our content around, which we do using left: 50%. This will move the content, but it will not be centered, as the top-left corner is centered rather than the center of the content container, shifting it to the right. To accommodate for this, like our first margin example, we calculated half our contents width, but this time we subtract it from our current position. The end result is centered content.

So these are the main ways to get thing horizontally centered using CSS. There are other tricks you can use to get things done, but these methods are the most common and in the case of the first two, the most dynamic. However, there is still the trick of getting things centered vertically.

Centering Vertically

Here is where the tricks come in. There are two main ways to center your content vertically on the page. However, before we start digging I should note that both of these methods require your content to have a set height. There are ways to center content without setting the height, but they have been proven to lack cross-browser compatibility. These two ways are your best bets.

The first way is exactly the same concept as our last horizontal example, except applied to the vertical position. It looks something like so:

As you can see, its the same basic concept. You relatively position the content in the center, then offset it by half its height. It works in pretty much any browser you will come across, and is simple to implement. A good solution, however, this is another way to do things.

This solution is a little odd at first, but it is the best solution to center your content vertically. That being said, it is a tricky one. It uses a floated div to force the content to the center of the page, and we all know floating things can be a pain sometimes. Luckily its implementation is fairly simple:

So now we have this new div, which we can call the floater, that basically pushes our content container to the vertical center of the page. As long as we remember to “clear” the content container everything will work as expected. To make things better, this method is said to be extremely compatible browser wise, with reports that it works in IE 5.

While there are all kinds for crazy ways to center content vertically, what about if you just want some plain text centered. Sure you could use one of the solutions above, but that seems like a little bit of overkill. Well this is were our secret third solution comes into play.

This will center a single line of text, and I stress single. I’m sure you noticed that the key to this method is the line-height, which makes each line of text a particular height. This means that if the text wraps, the next line of text will also be 50 pixels tall. This makes this solution good if you need a quick solution for one line of text, but otherwise something for a later time.

So this collection of techniques are your best solutions for centering your content, in both the x and y planes. They are simple to use and they get the job done. This will wrap up this tutorial, but just remember, when you need coding help all you have to do is Switch On The Code.