html登陆界面居中显示
时间: 2023-11-24 16:53:20 浏览: 35
以下是两种HTML登录界面居中显示的方法:
1.使用position和transform属性
```html
<div class="container">
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="登录">
</form>
</div>
<style>
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
form {
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
}
</style>
```
2.使用table和margin属性
```html
<div>
<table>
<tr>
<td>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="登录">
</form>
</td>
</tr>
</table>
</div>
<style>
table {
margin: 0 auto;
}
form {
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
}
</style>
```