我有登录表单，我希望它位于页面的中心。我的代码是:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<html>
<head>
<title></title>
<style>
div.ex
{
width:300px;
padding:10px;
border:5px solid gray;
margin-left:auto;
margin-right:auto;
}
.align {
position: absolute;
left: 8em;
}
</Style>
</head>
<body>
<div class="ex">
<h1>签订</h1>
<hr>
${errorMessage}
<form action="register" method="post">
<p>
<label>
ID：
<input type="text" name="id" value="${person.id}" class="align"/>
</label>
</p>
<p>
<label>
密码：
<input type="password" name="password" class="align"/>
</label>
</p>
<p>
<label>
确认密码：
<input type="password" name="password" class="align"/>
</label>
</p>
<p>
<label>
姓名：
<input type="text" name="name" value="${person.name}" class="align"/>
</label>
</p>
<p>
<label>
地址：
<input type="text" name="address" value="${person.address}" class="align"/>
</label>
</p>
<p>
<label>
电话：
<input type="text" name="phoneNumber" value="${person.phoneNumber}" class="align"/>
</label>
</p>
<input type="submit" value="注册"/>
</form>
</div>
</body>
</html>
除了所有文本字段都位于登录框之外，其他所有内容现在都位于中心位置。
如果有人能帮我解决这个问题，我将不胜感激。
最佳答案
将以下行添加到div.ex 的规则中:
position:relative;
通过建立新的定位上下文，所有具有 position:absolute 的子元素现在都相对于此 div 而不是页面主体进行定位。
Demo .
关于html - 需要一些帮助来居中登录表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20694157/