html实现一个登陆框,登录框需要居中显示,使用父div和子div
时间: 2023-06-29 15:06:53 浏览: 56
可以使用以下代码实现一个居中显示的登陆框:
```html
<div class="login-container">
<div class="login-box">
<h2>登录</h2>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">密码:</label>
<input type="password" id="password" name="password">
<br>
<button type="submit">登录</button>
</form>
</div>
</div>
```
CSS代码:
```css
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-box {
width: 300px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
}
```
使用flex布局,将父元素(login-container)的justify-content和align-items属性设置为center,使子元素(login-box)在父元素中居中显示。同时,设置login-box的宽度、内边距、边框和圆角等样式,使其呈现出一个简单的登陆框的样式。