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: 30343

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

Sivu 19/10/2016 08:21
In response to Entity Framework Core TrackGraph For Disconnected Data
Oh that's very very very nice ! Thanks for the write up Mike, much appreciated for the taking the to...

Mark 12/10/2016 16:42
In response to ASP.NET Web Pages vNext or Razor Pages
Although "Web Pages" was removed from the roadmap, has it just been renamed to "Razor Pages"?...

Satyabrata 12/10/2016 09:20
In response to Entity Framework Core TrackGraph For Disconnected Data
Nice article. Please write more articles featuring ASP.Net web pages. Thank you...

Julian 26/09/2016 14:27
In response to Loading ASP.NET Core MVC Views From A Database Or Other Location
Fantastic, many thanks Mike! Had got half way down this road before finding your article - saved...

Abolfazl Roshanzamir 14/09/2016 05:36
In response to Loading ASP.NET Core MVC Views From A Database Or Other Location
Nice article. Thanke you so much ....

cyrus 02/09/2016 15:12
In response to ASP.NET Web Pages vNext or Razor Pages
I've got some news. As Damian stated in this link: https://github.com/aspnet/Mvc/issues/5208 “We...

Simon 01/09/2016 08:00
In response to Loading ASP.NET Core MVC Views From A Database Or Other Location
Thanks Mike, nice post and exactly what I was looking for. Like you said, I think I'll opt to the...

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