Center ASP Master Page

First off let me say this is my first ASP.NET project I have done. I have tried using the center tags, encasing everything in a div and setting that to center, and the table tags with auto margin but nothing is working. Can someone point me in the right direction here?

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Server.SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head runat="server">
        <title></title>
        <link
            href="~/Styles/Site.css"
            rel="stylesheet"
            type="text/css"
        />
        <asp:ContentPlaceHolder
            ID="HeadContent"
            runat="server">
        </asp:ContentPlaceHolder>
    </head>

<body>
    <table style="margin-right: auto; margin-left: auto;">
        <form id ="form1" runat ="server">
            <div class="page" 
                style="background-color: #000000; position: absolute; top: 10px; left: 160px; width: 1000px; height: 100px;">

                    <asp:Image ID="Image1" runat="server" ImageUrl="~/Resources/image.png"
                        style="z-index: 1; left: 9px; top: 7px; position: absolute; height: 76px; width: 204px" />

                    <asp:Button ID="Button4" runat="server" BackColor="#333333" ForeColor="White" Height="23px" onclick="Button4_Click"
                        style="z-index: 1; left: 931px; top: 65px; position: absolute" Text="Login" Width="60px" />

                    <asp:Label ID="Label1" runat="server" Font-Underline="True" ForeColor="White"
                        style="z-index: 1; left: 727px; top: 67px; position: absolute; width: 193px; text-align: right">
                    </asp:Label>
            </div>

            <div 
                style="z-index: 1; left: 192px; top: 165px; position: absolute; height: 445px; width: 938px; color: #000000; background-color: #FFFFFF;">

                    <asp:ContentPlaceHolder
                        ID="MainContent"
                        runat="server">
                    </asp:ContentPlaceHolder>
            </div>

            <asp:Panel ID="Panel1" runat="server" BackColor="#003366"
                style="z-index: 1; left: 160px; top: 128px; position: absolute; height: 36px; width: 1002px">

                <asp:Button ID="Button5" runat="server" BackColor="#336699" BorderStyle="None" Height="23px" onclick="Button5_Click"
                    style="z-index: 1; left: 220px; top: 7px; position: absolute; height: 23px; width: 60px;" Text="Users" Width="60px" />

                <asp:Button ID="Button1" runat="server" BackColor="#336699"
                    style="z-index: 1; left: 10px; top: 7px; position: absolute; height: 23px; width: 60px;" Text="Home" BorderStyle="None" onclick="Button1_Click"/>

                <asp:Button ID="Button2" runat="server" BackColor="#336699"
                    style="z-index: 1; left: 80px; top: 7px; position: absolute; height: 23px; width: 60px" Text="About" BorderStyle="None" onclick="Button2_Click" />

                <asp:Button ID="Button3" runat="server" BackColor="#336699" BorderStyle="None" 
                    style="z-index: 1; left: 150px; top: 7px; position: absolute" Text="Profile" Height="23px" onclick="Button3_Click" Width="60px" />

                <asp:Button ID="Button6" runat="server" BackColor="#336699" BorderStyle="None" 
                    style="z-index: 1; left: 290px; top: 7px; position: absolute" Text="Servers" Height="23px" onclick="Button6_Click" Width="60px" />
            </asp:Panel>
        </form>
        <div style="z-index: 1; left: 160px; top: 165px; position: absolute; height: 445px; width: 32px; background-color: #FFFFFF;">
        </div>

        <div style="z-index: 1; left: 1130px; top: 165px; position: absolute; height: 445px; width: 32px; background-color: #FFFFFF;">
        </div>
    </table>
</body>
</html>

Currently I have the <table style="margin-right: auto; margin-left: auto;"> but it does not seem to work.

Solution

Firstly, you have absolute positioning set on your div with the class="page" attribute. Remove this as it will always position your div at top:10px; left:160px;

In fact, you have a lot of absolute positioning - you don't really need it and should get rid of it. Did you use Visual Studio or similar to design this page? Some tools are guilty of adding this additional CSS from time to time.

When I want to achieve centering I usually use a DIV with a defined width; I can then use the left attribute and a margin to simulate center aligned content. This also tends to work on a wide variety of browsers, especially older versions of Internet Explorer.

if you declare a div:

<div id="PageContainer">


</div>

and then use the following CSS:

#PageContainer{
    position:               absolute;
    float:                  left;
    left:                   50%; 
    top:                    20x;
    width:                  500px;
    margin:                 0px 0px 0px -250px; /* half of the width */
    background-color:       red;
}

Then it will center any content within the div. Defining the width and then setting the margin to be half the width is the key when using this technique.

See a live example here.

Stack Overflow use a more modern approach - it's the one you have attempted, but the key is that you need a width to be defined. By inspecting the CSS for StackOverflow (using the IE developer toolbar or firebug or similar), if, we look at the CSS for the header div tag, we see:

#header{
    width:    960px;
    height:   120px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

i.e. setting a width and then setting margin-left and margin-right to auto should be enough.