How To Center a Div With CSS The Easy Way

When you look at any commonly found site on the net, you'll notice that most sites have some things in common. The content of the page is perfectly in the center of your browser window.

 How is this possible, how can this be done?

There are a few steps that can be taken into consideration to achieve this basic, yet very helpful technique.

For starters.

1. Create the class that will be used to center divs. This is done in your CSS.

.div-center {
   width: 1000px;
   margin:  0 auto;
   background: #ccc;
}

2. The class MUST always have a width in order for the CSS to know how to Center the object. If a width is not given, the CSS has no idea how wide the div is in order to center it.

3. You can however, have a class that does not have a fixed width, but still center itself in your browser window, by using, min-width and max-width. These two will play a huge role when someone is using a 10" monitor or a 32" monitor.

4. Now that you've created the CSS for your centered div, you must now create the div in your html.

<div class="div-center">

   Content that needs centering goes in here, div, spans, a whole site!

</div>

I hope you've enjoyed this short introduction to centering divs in a browser window.