How to center a webpage/website horizontally using CSS?

By IncludeHelp Last updated : November 13, 2023

While designing a website, if you want to give it a perfect look by shifting the content to the center of the webpage. This tutorial will help you center your website horizontally using CSS only.

Center your website

To center a webpage/website, use a container (body) and define the maximum width of the container by using the max-width property. To center the container, use the margin property to auto. This property will center a webpage/website in the center of the browser.

CSS

body {
  max-width: 1024px;
  margin: auto;
}

Example

Here, we have a maximum width of 1024px for the container. This example will center the webpage/website on the broswer's screens.

<!DOCTYPE html> 
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width initial-scale=1.0" />
    <title>Document's Title</title>
    <style type="text/css">
      body{
      max-width: 1024px;
      margin: auto;
      }
    </style>
  </head>
  <body>
    <h1>DEMO: Center a webpage/website horizontally using CSS?</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
  </body>
</html>

Output

The output of the above example is:

center a webpage/website horizontally using CSS

How to make a div have a fixed width using CSS?

How to set a background-color for the width of text, not the width of the entire element, using only CSS?