How TO - Center Website


Learn how to center your website horizontally with CSS.


Center Website

Learn how to center your website horizontally:

This example is horizontally centered on screens that are wider than 500 pixels.


How To Center Your Website

Use a container element and set a specific max-width. A common width many websites use is 960px. To actually center the page, add margin: auto.

The following example will center the website on screens that are wider than 500px. On screens that are less than 500px wide, it will span the whole of the page:

Example

<style>
.content {
  max-width: 500px;
  margin: auto;
}
</style>
<body>

<div class="content">
  <!-- Page content -->
</div>

</body>
Try it Yourself »

Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.

Get started for free ❯

* no credit card required


Copyright 1999-2023 by Refsnes Data. All Rights Reserved.