html页面中，怎么能能让form表单在页面中居中，上下左右都居中。不分页面的大小，只在页面的中间显示
展开全部
<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把表单包起来，控制让其居中。
#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把表单包起来，控制让其居中。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
