THE BEST WEB DEVELOPER SITE

How TO - Center Website


Learn how to center your website horizontally.


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 »