flex布局 div盒子居中
直接上代码吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>邮箱验证测试</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body,html{
width: 100%;
height:100%;
}
.top{
display: flex;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
}
.cen{
width: 250px;
height: 250px;
background: rgba(110,150,150,0.2);
border-radius: 10px;
}
input {
border-radius: 5px;
}
</style>
</head>
<body>
# 这里是外层div，开启flex 布局
<div class="top">
# 这里是内层div，接收top flex 弹性盒子设置属性。
<div class="cen" >
<form method="post" action="">
用户名：<input type="text" name="username"><br>
密码：<input type="text" name="password"><br>
验证邮箱：<input type="text" name="mall"><br>
{# 内容 ：<input type="text" name="text"><br>#}
<input type="submit" value="验证">
</form>
<hr>
<div >
<form method="get" action="/sigin">
输入激活码：<input type="text" name="code">
<input type="submit" value="提交">
</form>
</div>
<hr>
<div >
<form method="get" action="/deng">
账号：<input type="text" name="username"><br>
密码：<input type="text" name="password"><br>
<input type="submit" value="提交">
</form>
</div>
</div>
</div>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-07-24 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读