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:
Last Updated:
Posted by:
Total Views to date: 25558

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

Mike 6/29/2015 2:22 AM
In response to MVC 5 with EF 6 in Visual Basic - Sorting, Filtering and Paging
This is the first example that I have found that works....

Marty 6/28/2015 4:57 AM
In response to Posting Data With jQuery AJAX In ASP.NET Razor Web Pages
Mike, what if I don't want to render back the text to the browser, but I want to send it some other...

Mike 6/27/2015 4:00 PM
In response to Migrating Classic ASP To ASP.NET Razor Web Pages Part One- Razor Syntax And Visual Basic
have you used any of the code converters to convert classic asp to c#? If so, which one do you have...

deepan 6/27/2015 12:49 PM
In response to How To Send Email In ASP.NET MVC
Your article is very very useful for me...thanks for giving this article ...this is very simple to u...

Howie 6/27/2015 6:20 AM
In response to Scheduled Tasks In ASP.NET With Quartz.Net
Mike - Great article. I'm curious about the lifetime of the scheduler - I see your is static and you...

Chris 6/26/2015 7:42 PM
In response to Ajax with Classic ASP using jQuery
I have searched the web high and low for a clean simple solution using JQuery, JSON, and Classic ASP...

aaron 6/26/2015 12:01 PM
In response to 7 C# 6.0 Features That Every ASP.NET Developer Should Know About
#6 enables a less-verbose functional programming style...

Marty 6/26/2015 5:26 AM
In response to Posting Data With jQuery AJAX In ASP.NET Razor Web Pages
Great article. You don't show the code in Receiver.cshtml to send data back. How would you send text...

Vimal 6/25/2015 11:09 AM
In response to iTextSharp - Working with Fonts
I want to edit my existing PDF. I want to change font color. I want to change is gray or some I to...

yoyo 6/24/2015 9:00 PM
In response to Dependency Injection and Inversion of Control with ASP.NET MVC
Hi, thanks for your explainations. Lionel...