How to center a Layout

How to center a Fixed Width Layout

Centering an entire layout is easy in CSS. Wrap all you HTML in some kind of container, usually a div:

<body>
   <div class="container">

      <-- All of the content in here -->

   </div>
</body>

We can use CSS flexbox to center the container div easily. All we have to do is:

Give the container a desired width (usually in %)
Set the body element to use flexbox as its display
Set the body element to center its content using justify-content

body {
  display: flex;
  justify-content: center;
}

.container {
  width: 80%;
}

See example

Setting a max-width

Using percentages for your page width allows for flexible pages, however we need to be mindful of line lengths. Blanket percentage widths on very large screens will cause readability issues. It's good practice to also specify a maximum page width to ensure that the line lengths of your text do not get too long.

Use the same HTML:

<body>
  <div class="container">

    <-- All of the content in here -->

  </div>
</body>

View your page to decide a what point the line length becomes too large. Set the max-width of the container to the desired maximum width of the page. Use em, rem, or px for this value.

.container {
  margin: 0 auto;
  width: 80%;
  max-width: 1024px;
}

See example

Non Flexbox approach

There is also an older method for centering which uses automatic margins.

Create a container element (using a section, article, div, etc) and give the container a desired width
Set the left and right margin on the container element to auto. This will make the left and right margins automatically equal.

.container {
  margin: 0 auto;
  width: 80%;
}

See example

Back to Week 6 page »