Using Auto Margins to Center DIVs with CSS

Introduction

Now that you know what this group of articles is about, it’s time to recall the topics that were discussed in the last tutorial. In that particular article I explained how to build a fully-centered web page layout by using the “text-align” CSS property, which you’ve probably utilized hundreds of times before.

Speaking more specifically, this CSS-based technique relied heavily on the mentioned property for centering all of the main DIVs that composed the structure of the web page, by assigning a “text-align: center” declaration to the “body” element of the web document. Undoubtedly, this is one of the simplest approaches that can be used for constructing centered designs very quickly, since the procedure requires only a minimal background in style sheets. That’s all.

However, as was stated in the beginning, there are a few other methods that can be utilized for building centered web page layouts. Most of them base their functionality on employing CSS margins. Yes, as you may have guessed, it’s possible to place a DIV in the middle of a web document by assigning the same values to its respective left and right margins.

Therefore, in this third chapter of this series I’ll be explaining in a step-by-step fashion how to use CSS margins for building a liquid, centered web document layout. Then, once you’ve grasped the logic that drives this approach, I’ll show you how to use it with liquid designs.

Now, with the preliminaries out of our way, it’s time to discover the real power of CSS margins for centering DIVs on a web page. Let’s get started!