justify-content和align-items实现居中登陆界面
程序员文章站
2022-06-13 13:23:09
...
1、注意事项
用justify-content和align-items实现居中时：
1、父元素要设置具体的width和height。
2、display为flex。
3、justify-content与align-items配合使用。
2、实现效果图及代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登陆</title>
<style type="text/css">
html{
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#login{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
border: 1px black solid;
}
</style>
</head>
<body>
<div id="login">
<h1>登陆</h1>
<input type="text"><br>
<input type="password"><br>
<button>确定</button>
</div>
</body>
</html>上一篇： C#+winform登陆界面案例
下一篇： First Day