How to center the content of a web page

3.4 (5 votes)

This question gets asked very often in the forums and newsgroups, and is very easy once you know how.

Create a "wrapper" div to hold all your content and apply its width property through CSS, then give it a margin:auto attribute

 
<style type="text/css">
  #wrapper {width: 760px;margin:auto}
  #content{background-color:red}
  </style>
  </head>
  <body>
  <form id="form1" runat="server">
    <div id="wrapper">
      <div id="content">
        content
      </div>
    </div>
  </form>
  </body>

Date Posted:
Last Updated:
Posted by:
Total Views to date: 29236

4 Comments

- Mikey

I don't know if this was intended, but in your snippet above. I think you have an extra <div id="wrapper">

- Mike

@Mikey,

Thanks for spotting that. I have corrected it.

- tom

i have a web page that uses html5 and i have tried everything to center my page with no success. everything i try the page stays in the left corner of my screen. any suggestions i would appreciate it. thanks.

- Mike

@tom

The technique outlined above works with the HTML5 doctype.

Recent Comments

Jerrie Pelser 23/07/2016 05:08
In response to Loading ASP.NET Core MVC Views From A Database Or Other Location
Very cool concept Mike!...

Satyabrata 20/07/2016 20:54
In response to ASP.NET Web Pages vNext or Razor Pages
Thanks for sharing ...

infocyde 18/07/2016 00:40
In response to ASP.NET Web Pages vNext or Razor Pages
Curious to see if a new release of webmatrix will happen or if that is dead in the water....

Don 15/07/2016 16:58
In response to ASP.NET Web Pages vNext or Razor Pages
Thanks Mike! Wonder if the MVC Lite is the Controllerless Views approach referred to on the Web Dev...

Jose Negro 30/06/2016 16:02
In response to Entity Framework Code First and Stored Procedures
Thank you very much for so clear examples....

A. Truong 29/06/2016 15:25
In response to The Best Way To Import Data From Excel To SQL Server via ASP.NET
Awesome work! Lifesaver....

satyabrata 19/06/2016 18:53
In response to Entity Framework Code First and Stored Procedures
Nice article. Thanks. The menu on this website not working in mobile....

satyabrata 16/05/2016 06:28
In response to Implementing SQL Server Full-Text Search In An ASP.NET MVC Web Application With Entity Framework
This is great. Thanks for sharing....

sharey 06/05/2016 13:15
In response to The Best Way To Import Data From Excel To SQL Server via ASP.NET
nice work gentleman.Really helpfull....

Satyabrata Mohapatra 20/04/2016 04:36
In response to The Best Way To Import Data From Excel To SQL Server via ASP.NET
Another beauty !!!! Thanks for sharing....