With a "width" and any valid "!doctype", yes, any element with "margin:auto;" will center.
I did a quick-mock here... much could be done to condense and modify (not the least of which, the way I did inline-styles on the indivial "<li>"s... could do alot better but I'm pressed for time for another project...
Try this:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */
html, body {min-height:100%; /*for compliant browsers*/
font:x-small Arial, Verdana, sans-serif;voice-family: "\"}\"";voice-family:inherit;font-size:small;/*for IE 5.5 */
font-size:100%; line-height:1.125em;}
#wrapper p {font-size:0.875em; color:black; }
/*non-content: e.g., -navigation lists, etc. Slightly smaller than content text {font-size:0.75em;} */
html>body {font-size:small; height:auto;/* Assist IE6 and earlier, 100% height */
font-size: small; voice-family: "\"}\"";voice-family: inherit; font-size: medium}
/* Assist IE rendering height, keyword-font sizes, etc. */
#wrapper {min-height:100%; overflow:hidden;} /* 100% height for compliants, enwraps content*/
* html #wrapper {height:100%;}/* and feed IE what it needs */
h1, h2, h3, h4, h5, h6 {font-size:0; font-family: 'times new roman', arial, verdana, helvetica,
sans-serif; background-color:none;font-style:normal; font-variant:normal;
font-weight:normal; margin:14px 0 4px 10px;}
h1 {font-size: 1.60em;}
h2 {font-size: 1.50em;}
h3 {font-size: 1.40em;}
h4 {font-size: 1.30em;}
h5 {font-size: 1.26em;}
h6 {font-size: 1.20em;}/* Defined default Header sizes*/
body, html {background-color:#e6e6e6;}
#main {position:relative; width:700px; height:540px; margin:20px auto; background: #3d4b91 url(background.png);}
#navs {position:absolute; right:60px; top:50px; display:block;}
#navs li {list-style-type:none;}
#navs li a {color:white; background-color:none; display:block; padding-top:15px; text-align:center; text-decoration:none;}
#navs li a:hover {color:black; text-decoration:underline;}
</style>
<script type="text/javascript"><!--
// -->
</script>
<link rel="shortcut icon" href="favicon.ico" /><!-- path to your favicon -->
</head>
<body>
<div id="wrapper">
<div id="main">
<ul id="navs">
<li title="Your YELLOW link" style="position:absolute; top:56px; left:-70px; width:90px; height:45px;">
<a href="#" style="height:45px; width:90px;">Yellow LINK</a></li>
<li title="Your RED link" style="position:absolute; top:115px; width:118px; height:30px; left:-100px;">
<a href="#" style="height:30px; width:118px;">RED LINK</a></li>
<li title="Your BLUE link" style="position:absolute; top:183px; left:-70px; width:90px; height:38px;">
<a href="#" style="width:90px; height:38px;">BLUE LINK</a></li>
</ul>
<div id="content" style="position:absolute; left:90px; top:88px; width:397px; height:428px; background-color:#3d4b91">
<iframe name="content" src="http://www.freewebs.com/amosharper/playsforkidz.com/home.htm" frameborder="0" style="width:397px; height:428px; background-color:#3d4b91">
</iframe></div>
</div><!-- end MAIN -->
</div><!-- end wrapper -->
</body>
</html> Looks the same for IE6 and Firefox. Validates (to a degree). I would add the background-color #3d4b91 to the content of the iFRAME "home.htm", to get rid of that white-splash that occurs when the page loads. That is the iFRAME's content, which apparently has a white (or default?) background color.
Questions? Let me know. :)