1、首先，打开html编辑器，新建html文件，例如：index.html。
2、其次，在index.html中的<style>标签中，输入css代码：body {text-align: center}。
3、最后，浏览器运行index.html页面，此时会发现成功通过css让表单在页面中居中了。
<STYLE type="text/css">#login{
width:400px
height:280px
position:absolute
left: 50%
top: 50%
margin-left:-200px
margin-top:-140px
border:1px
background-color:red
align:center
}
#form{
width:300px
height:160px
position:relative
left:50%
top:50%
margin-left:-150px
margin-top:-80px
}
</STYLE>
</head>
<body>
<div id="login">
<div id="form">
<s:form action="" >
<s:textfield name="username" label="用户名" ></s:textfield>
<s:password name="password" label="密码" ></s:password>
<s:select list="{}" listKey="1" listValue="1" label="用户类型"></s:select>
<tr align="center">
<td colspan="2" align="center" valign="middle">
<s:submit value="登录" theme="simple"></s:submit>
<s:reset value="重置" theme="simple"></s:reset> </td>
</tr>
</s:form>
</div>
</div>
</body>
</html>
原理就是使用两个div,一个是绝对定位，一个是相对定位，绝对定位用于控制在浏览器中位置；相对定们的div把表单包起来，控制让其居中。
<div id="bigdiv">假设这个bigdiv是你的大容器
</div>
-------------css------------:
body{
text-align:center
}
#bigdiv{
width:992px/*换成你的宽度，宽度必须有*/
margin:0 auto/*这个就是可以让有宽度的div框居中的语句*/
}
