html中是没办法实现上下居中的,如果设置上下居中,需要通过js程序来设置。
方法一:在外面嵌套一层table,用table中的td来控制居中
<form id="form1" method="post">
<table border=0 cellpadding=0 cellspacing=0 style="width:100% ;height:100%">
<tr>
<td style="width:100%;" align="center" valign="middle">
<table style="background-color:lightskyblue; margin:auto">
<tr>
<td></td>
<td align="center"> 用户登录 </td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
方法二:
table {
width: 600px; height: 400px;//可随意
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
margin: auto; /* 有了这个就自动居中了 */
}
方法三:
table{
margin:0px auto;
width:300px;
height:200px;
position:absolute;
top:50%;
left: 50%;
margin-left: -150px;
margin-top: -100px;
}
left:50%是元素最左边(左上角)和中线重合的地方,这个时候是不居中的,需要减去该元素的宽度一半,即margin-left等于负的宽度的一半