centering div with css


This is the snippet from my css file

    position: relative;
    text-align: center;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 1.5em;
    font-weight: 900;
    background-color: #5E9DC8;

This is the html section that I'm trying to use:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    <title>Bicycle Store Database</title>
    <link rel="stylesheet" type="text/css" href="web.css" />

    <h1>ACME BICYCLE SHOP</h1>
    <h2>GET IN GEAR!</h2>

    <div id="centered">
    <table id="table" border="0" cellpadding="10"> 
            <td><a href="search_inv.php" class="navTest">Go Shopping!</a><br/><br/>
            <a href="search_service.html" class="navTest">Check a Service Ticket</a></td>

    <p><br/><a href="index.html">HOME</a></p>

This is the result:

div is not centered

Everything I've read indicates that I've done this correctly, but it's off centered in all my browsers. Any thoughts?

Problem courtesy of: hobbes131


Why you are using table for that? any specific reason? Can't you simply do it like this?

<div class="center">
  <a href="#">Go Shopping</a>
  <a href="#"></a>

.center {
   margin: auto;
   /* Other styles goes here, width height background etc */
Solution courtesy of: Mr. Alien


The div is centred in the page.

The table is left aligned in the div.

Add table { margin-left: auto; margin-right: auto; } to centre the table in the div.

Discussion courtesy of: Quentin

you are centering #centered but not the table in it. add margin:0 auto; to #table.

Discussion courtesy of: Matanya

This recipe can be found in it's original form on Stack Over Flow.