How to center the content of a web page

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: Saturday, May 5, 2007 8:48 PM
Last Updated: Monday, July 12, 2010 6:22 AM
Posted by: Mikesdotnetting
Total Views to date: 22804

4 Comments

Monday, July 12, 2010 6:04 AM - Mikey

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

Monday, July 12, 2010 6:23 AM - Mike

@Mikey,

Thanks for spotting that. I have corrected it.

Sunday, July 14, 2013 7:45 PM - 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.

Monday, July 15, 2013 4:50 AM - Mike

@tom

The technique outlined above works with the HTML5 doctype.
Add your comment

If you have any comments to make about this article, please use this form to do so. Make sure that your comment relates specifically to the article above. More general comments can be posted through the form on the Contact page.

Please note, all comments are moderated, and some may not be published. The kind of things that will ensure your comment is deleted without ever seeing the light of day are as follows:

  • Not relevant to the article
  • Gratuitous links to your own site or product
  • Anything abusive or libellous
  • Spam
  • Anything in a language I don't understand including gibberish.

I do not pass email addresses on to spammers, so a valid one will assist me in responding to you personally if required.

Recent Comments

stephen 1/28/2015 9:53 PM
In response to ASP.NET MVC 5 with EF 6 - Working With Files
Hi, Sorry for wasting your time, I had a comment <!--Images--> inside the form this stopped it from...

stephen 1/28/2015 9:47 PM
In response to ASP.NET MVC 5 with EF 6 - Working With Files
Everything has been ok up until this part, here's a snippet of the entire file but i removed lines =...

Stephen kenny 1/28/2015 8:26 PM
In response to ASP.NET MVC 5 with EF 6 - Working With Files
Hi, great article. My issue is with the create view. @using (Html.BeginForm("Create", "Reptiles",...

Jenelyn 1/27/2015 6:44 PM
In response to MVC 5 with EF 6 in Visual Basic - Implementing Basic CRUD Functionality
I'm searching CRUD using VB.net 2010 and I can't find any, how sad...

Kadu Portugal 1/23/2015 10:55 AM
In response to Scheduled Tasks In ASP.NET With Quartz.Net
Hi Mike, Thank you for your useful article. I implement it in my project, and everything run...

Satyabrata 1/23/2015 6:02 AM
In response to Usage of the @ (at) sign in ASP.NET
Refreshed a lot of things.Thanks...

Vo Thanh Chinh Trung 1/22/2015 4:30 PM
In response to Adding A View
It's very helpful...Thank you so much, Mikes!...

Joop Stringer 1/22/2015 12:00 PM
In response to Inline Editing With The WebGrid
How to add a row for a new record ?...

Gaetan C 1/21/2015 8:49 PM
In response to Looking At The WebMatrix WebGrid
I use the webgrid very often and I Wonder if it's possible to merge to different sql query into on...

Teresa 1/19/2015 3:08 PM
In response to MVC 5 with EF 6 in Visual Basic - Creating an Entity Framework Data Model
At the top, the first thing you write is "Open Visual Studio and create a new C# Web project named I...