我是 Web 开发的新手，我正在尝试将整个 div 移动到页面的中心。但我无法做到这一点，也没有得到任何错误。下面是html页面的代码。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
#chart {
width:500px;
height:450px;
background-color:white;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
behavior: url(PIE/PIE.htc);
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Here goes some tilte</title>
<meta name="DESCRIPTION" content="Determine your ring size in different countries.">
<meta name="KEYWORDS"
content="ring, size, USA, american, german, french, british, japanese, swiss">
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
function changeValues(which) {
document.countries.D1.selectedIndex = which;
document.countries.D2.selectedIndex = which;
document.countries.D3.selectedIndex = which;
document.countries.D4.selectedIndex = which;
document.countries.D5.selectedIndex = which;
document.countries.D6.selectedIndex = which;
document.countries.D7.selectedIndex = which;
document.countries.D8.selectedIndex = which;
document.countries.D9.selectedIndex = which;
}
// --></script>
<link href="/style.css" rel="stylesheet" type="text/css">
<link href="/print.css" rel="stylesheet" type="text/css" media="print">
<script language="JavaScript" src="/misc_functions.js" type="text/javascript"></script>
</head>
<body bgcolor="pink">
<div align="center" id="chart" >
<center>
<table border="0" cellpadding="10" cellspacing="0" width="450">
<tr>
<td width="470" valign="top" class="content">
<div align="center">
<span class="red"><font color="Black"><h3>Here will be having a static data on the form<h3></font></span>
</div>
</td>
</tr>
</table>
<!-- Place main data here -->
<script language="JavaScript" src="/browser_detection.js" type="text/javascript"></script>
<noscript>
<blockquote>
<p><font size="3" color="#FF0000"><b>You do not have JavaScript enabled.</b></font><br>
<font size="2" color="#000080">The conversions on this site require the use of JavaScript so please enable before continuing.
For assistance in enabling JavaScript, please contact the webmaster.</font></p>
</blockquote>
</noscript>
<form method="POST" name="countries">
<div align="center">
<table border="0" style="border: 1px solid rgb(255,0,0)">
<tr>
<td align="center" bgcolor="#DFDFDF">USA </td>
<td align="center" bgcolor="#D5D5FF">INDIA</td>
<td align="center" bgcolor="#D5D5FF">PAKISTAN</td>
<td align="center" bgcolor="#D5D5FF">CHINA</td>
</tr>
<tr>
<td align="center" bgcolor="#DFDFDF"><select name="D1" size="1"
onChange="changeValues(document.countries.D1.selectedIndex);">
<option> ---</option>
<option>Damodar</option>
</select></td>
<td align="center" bgcolor="#D5D5FF"><select name="D2" size="1"
onChange="changeValues(document.countries.D2.selectedIndex);">
<option> ---</option>
<option>Damodar</option>
</select></td>
<td align="center" bgcolor="#D5D5FF"><select name="D3" size="1"
onChange="changeValues(document.countries.D3.selectedIndex);">
<option> ---</option>
<option>Damodar</option>
</select></td>
<td align="center" bgcolor="#D5D5FF"><select name="D4" size="1"
onChange="changeValues(document.countries.D4.selectedIndex);">
<option> ---</option>
<option>Damodar</option>
</select></td>
</tr>
</table>
</div>
<div align="center">
<table border="0" style="border: 1px solid rgb(255,0,0)">
<tr>
<td align="center" bgcolor="#DFDFDF">British</td>
<td align="center" bgcolor="#DFDFDF">French</td>
<td align="center" bgcolor="#DFDFDF">German</td>
<td align="center" bgcolor="#DFDFDF">Japanese</td>
<td align="center" bgcolor="#DFDFDF">Swiss</td>
</tr>
<tr>
<td align="center" bgcolor="#DFDFDF"><select name="D5" size="1"
onChange="changeValues(document.countries.D5.selectedIndex);">
<option> ---</option>
<option>Damodar</option>
</select></td>
<td align="center" bgcolor="#DFDFDF"><select name="D6" size="1"
onChange="changeValues(document.countries.D6.selectedIndex);">
<option> ---</option>
<option>Damodar</option>
</select></td>
<td align="center" bgcolor="#DFDFDF"><select name="D7" size="1"
onChange="changeValues(document.countries.D7.selectedIndex);">
<option> ---</option>
<option>Damodar</option>
</select></td>
<td align="center" bgcolor="#DFDFDF"><select name="D8" size="1"
onChange="changeValues(document.countries.D8.selectedIndex);">
<option> ---</option>
<option>Damodar</option>
</select></td>
<td align="center" bgcolor="#DFDFDF"><select name="D9" size="1"
onChange="changeValues(document.countries.D9.selectedIndex);">
<option> ---</option>
<option>Damodar</option>
</select></td>
</tr>
</table>
</div>
</center>
</form>
<table>
<tr>
<td>
<p align="center"><font color="#800000">Here will be having a static data on the form</font></p>
<p><font color="#000080"><big>Here will be having a static data on the form</big></font><ol>
<li><font color="#004080">Here will be having a static data on the form</font></li>
<li><font color="#004080">Here will be having a static data on the form</font></li>
</ol></p>
</td>
</tr>
<table>
</center>
</div>
</div>
</body>
</html>
下面我附上截图，你可以找到曲线框，它留在页面上，我希望那个曲线框和下面的元素居中。请任何人建议如何做到这一点
