开发者 https://www.devze.com 2023-01-23 21:48 出处：网络

I have a div and inside it is other divs.My div is:<div id=\"Table_01\">&l开发者_如何学Ct;/div>

相关专题：css

I have a div and inside it is other divs.My div is:<div id="Table_01">&l开发者_如何学Ct;/div>

How can i center it so that all other divs are centered?.

margin-left: auto;
margin-right: auto;

And be sure it doesn't have a 100% width value.

-- Edit: Since you're using a position: absolute; with a known width (of 900px in this case) you can do:

left: 50%;
margin-left: -450px;

where the -450px is half of the width, negated.

inner_div { margin:0 auto; }

To center it vertically:

inner_div { position:absolute; top:50%; margin-top:-300px; }

here is my css:

#Table_01 {
    position:absolute;
    left:0px;
    top:0px;
    width:900px;
    height:600px;
}

#index-01 {
    position:absolute;
    background-color:#003366;
    left:0px;
    top:0px;
    width:900px;
    height:30px;
}

#index-02 {
    position:absolute;
    left:0px;
    top:30px;
    width:900px;
    height:72px;
}

#index-03 {
    position:absolute;
    left:0px;
    top:102px;
    width:900px;
    height:27px;
}

#index-04 {
    position:absolute;
    left:0px;
    top:129px;
    width:223px;
    height:223px;
}

#index-05 {
    position:absolute;
    left:223px;
    top:129px;
    width:382px;
    height:174px;
}

#index-06 {
    position:absolute;
    left:605px;
    top:129px;
    width:295px;
    height:223px;
}

#index-07 {
    position:absolute;
    left:223px;
    top:303px;
    width:382px;
    height:49px;
}

#index-08 {
    position:absolute;
    left:0px;
    top:352px;
    width:475px;
    height:183px;
}

#index-09 {
    position:absolute;
    left:475px;
    top:352px;
    width:425px;
    height:183px;
}

#index-10 {
    position:absolute;
    left:0px;
    top:535px;
    width:900px;
    height:34px;
}

#index-11 {
    position:absolute;
    background-color:#003366;
    left:0px;
    top:569px;
    width:900px;
    height:31px;
}

My html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="http://localhost/assets/css/td.css" />
<title>Training Day</title>

<body style="margin: 0px; background-color: rgb(255, 255, 255);">
<div id="Table_01">
<div id="index-01"> &nbsp; &nbsp;$today is<br>
</div>
<div id="index-02"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; $logo and
$searchbox<br>
</div>
<div id="index-03"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp;Navigation<br>
</div>
<div id="index-04"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp;Box 1<br>
</div>
<div id="index-05"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
Front page picture holder<br>
</div>
<div id="index-06"> &nbsp; &nbsp; &nbsp; Trending Topics<br>
</div>
<div id="index-07"> &nbsp; &nbsp; Heading author and location</div>
<div id="index-08"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Tabs<br>
</div>
<div id="index-09"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; Twitter Live Feeds<br>
</div>
<div id="index-10"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; Stats bar<br>
</div>
<div id="index-11"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Footer<br>
</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>

should work:

Table_01 {

position:absolute; 
margin-left:-300px;
left:50%;
width:900px; 
height:600px;

}

This is what always works for me.

<!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="nl" lang="nl">
<head>
    <style type="text/css">
        body {
          text-align: center;
        }

        #mainsite {
           width: 770px;
           margin: auto;
           text-align: left;
           background-color: red;
        }
    </style>
</head>
<body>

<div id="mainsite">
    whee
</div>

</body>
</html>