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>

You might also like...

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

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

dave 20/08/2016 14:57
In response to ASP.NET Web Pages vNext or Razor Pages
Do SimplemembershipProvider in viewpages is supported?...

Steven 18/08/2016 04:40
In response to Entity Framework Code First and Stored Procedures
Can you provide the directives (using statements) you're using for EF7 example?...

yousaid 17/08/2016 22:08
In response to ASP.NET Web Pages vNext or Razor Pages
Increasingly, learning a Microsoft tool is no longer worth the return on investment. Too many tools...

jared 12/08/2016 05:54
In response to ASP.NET Web Pages vNext or Razor Pages
hi mike, just for clarification, is viewpages something different from webpages? is webpages still...

Jocke 08/08/2016 20:37
In response to Loading ASP.NET Core MVC Views From A Database Or Other Location
Good post! If this was to be implemented in a CMS where users can change the view files, how would I...

cyrus 05/08/2016 19:49
In response to ASP.NET Web Pages vNext or Razor Pages
I think adding these features to webpages make it complicated. msft forget webpages goal so we move...

Curt Smith 27/07/2016 20:38
In response to ASP.NET Web Pages vNext or Razor Pages
I am only slightly disappointed to hear that WebMatrix is officially dead, because I suspected this...

Darshan Raj L G 27/07/2016 13:20
In response to Implementing SQL Server Full-Text Search In An ASP.NET MVC Web Application With Entity Framework
I though it would be more helpful for somebody who wants to work with Entity Framework... please EF...

Satyabrata 25/07/2016 08:09
In response to Loading ASP.NET Core MVC Views From A Database Or Other Location
Very Interesting!!...

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!...