maxdesign.com.au

Published:

How do you center a containing block on a page using CSS? There are two main methods and the choice should be made based on whether your page layout is liquid (will move in and out depending on the size of the browser window) or fixed width.

Centering liquid layouts

Liquid layouts are easy to center using margins on each side of the containing box. The margins can be set with em, pixel or percentage units.

.container {
  margin-left: 10%;
  margin-right: 10%;
}

Centering fixed-width layouts

Theoretically, you should be able to apply auto margins to the left and right of the containing block and it should center on the page.

The W3C Visual formatting model states: “If both ‘margin-left’ and ‘margin-right’ are ‘auto’, their used values are equal. This horizontally centers the element with respect to the edges of the containing block.”

So, a containing block should be able to be centered using the following rules:

.container {
  margin-left: auto;
  margin-right: auto;
  width: 50em;
}

Or, a shorthand version using the margin property:

.container {
  margin: 0 auto;
  width: 50em;
}

CodePen demo

Translations