How to centre a DIV using CSS


“How do I centre a DIV?” is rather a common question but surprising there isnt much information out there about how to do it – well here’s how!   If you want to centre a DIV (or any other block element) in CSS do the following:

  1. Set a width for the DIV block.
  2. Make both its left and right margins to auto.

Both steps are necessary — that is, you cannot just set the margins to auto without specifying the width of the block and expect this method to work.

The technique works because when both margins are set to auto, web browsers are required by the CSS standard to give them equal width.

For example, if you want your div block to have a width of 700 pixels, the following code will centre the block.

#content {

width: 700px ;

margin-left: auto ;

margin-right: auto ;

}

Incidentally, the width doesn’t need to be in pixels. Other units like em or percentage will work just as well.

Contact Me