我创建了一个dreamweaver 站点，在我的模板中我制作了一个带有div 标签#HeaderBox 的css 样式表。我希望这是一个屏幕大小为 40% 的框，指定数量的像素就可以了。我想将此框居中，但标签不起作用这是模板的代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center>
<div id="HeaderBox"></div>
</center>
</body>
<html>
这是styles.css的代码：
@charset "utf-8";
#HeaderBox {
font-family: "Lucida Console", Monaco, monospace;
font-size: 24px;
font-weight: normal;
font-variant: normal;
text-transform: capitalize;
text-decoration: underline;
background-position: center 40px;
border: 2px groove #CC6;
top: 0px;
text-align: center;
vertical-align: 10%;
width: 40%;
padding: 0%;
}
提前致谢。