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

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

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

Avinash Setty 18/04/2016 18:39
In response to Exploring Prefix: A Free ASP.NET Profiling Tool
This tool is awesome! I am very thankful for introducing this tool for us! By any chance, do you is...

flyingtigerfan 17/04/2016 22:56
In response to Request.Form Is Empty When Posting To ASPX Page
Thanks - spent hours trying to figure this out. I'm out of date and trying to start working on some...

Darren Evans 12/04/2016 16:42
In response to Exploring Prefix: A Free ASP.NET Profiling Tool
'Tis indeed a marvellous thing. Just waiting on its appearance for ASP.NET Core. Hopefully not long...

Arkady 03/04/2016 12:09
In response to Request.Form Is Empty When Posting To ASPX Page
Thank you! I spent a day to understand what problem is before I found your article! But I made of...

satyabrata 03/04/2016 03:50
In response to Exploring Prefix: A Free ASP.NET Profiling Tool
This is great!!!!!...

John Dave Bumatay 01/04/2016 02:01
In response to Windows Authentication With ASP.NET Web Pages
+1 ! This worked for me like a magic!~ thank you very much Mike! ;)...