How to Center Div Using CSS

You can use any HTML editor or even a simple text editor to edit CSS files.

The Cascading Style Sheet (CSS) language allows for a vast array of customization and functionality when it comes to designing websites. Learning how to center a "div" block that contains text, graphics and other media by using CSS can come in handy, especially when it comes to creating pleasing designs that require "div" blocks to be positioned in a certain manner.

Things You'll Need

• HTML editor

Instructions

1. Open your favorite HTML editor on your computer. Load the external Cascading Style Sheet (CSS) file from your website onto the HTML editor.

2. Locate the "div" block that you want centered and make note of the "div id". You will use this ID to selectively assign certain design rules to that particular "div" block.

3. Copy the following text into the CSS file:

   #"div id" {

   width: "width" ;

   margin-left: auto ;

   margin-right: auto ;

   }

4. Replace "div id" with the ID of the "div" block you want centered. Replace "width" with the numerical width you want the block to have, in pixels. Save the file in your HTML editor and load it onto your web server.

References

• Christopher Heng: How to Centre a DIV Block Using CSS