<%-- Created by IntelliJ IDEA. User: Administrator Date: 2017/12/13/013 Time: 9:09 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <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 style="text-align: center;"> <div id="login"> <div id="form"> <fieldset> <legend>登陆界面</legend> <form action="validate" name="test" method="get"> 用户名:<input type="text" name="uname"><br> 密码:  <input type="password" name="upass"><br> <input type="submit" value="登录"> <input type="reset" value="清空"> <br> <a href="newuser.jsp">注册新用户</a> </form> </fieldset> </div> </div> </body> </html>
原理就是使用两个div,一个是绝对定位,一个是相对定位,绝对定位用于控制在浏览器中位置;相对定们的div把表单包起来,控制让其居中。