登录页设计（登录盒子居中）

.login_container内有一个login_box

设置login_box居中

　　

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>登录页设计（窗体居中设计）</title>

<style>
	html,body,#app{
		height: 100%;
		margin:0;	
	}
	.login_container{
		background-color: #2b4b6b;
		height: 100%;
	}
	.login_box{
		width: 450px;
		height: 300px;
		background-color: #fff;
		border-radius: 3px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
</style>
</head>
<body>
	<div id="app">
		<div class="login_container">
			<div class="login_box">123</div>
		</div>
	</div>

</body>
</html>

　　

 

posted @ 2021-04-06 11:50  无风何其浪  阅读(256)  评论(0)    收藏  举报