MUSINGS

How to centre a block element on the page using CSS

How to centre a block element on the page using CSS

In the past I’ve always used the following CSS code to centre a DIV (or other block element) on a page.

#divid {
  width: 620px;
  left: 50%;
  margin-left: -310px;
}

It works by setting the left edge of the div at 50%, which if it containing element is BODY then we are setting the left edge to 50% of the page. If we left it at that then the DIV would start at half way and not be centred at all. The trick is to set the left margin “margin-left” to be negative half of the DIV’s width. This forces the DIV back towards the left by half and therefore you end up with a DIV centred on the page.
Another method is to use the following. Read more about How to centre a block element on the page using CSS