登录页设计(登录盒子居中)

.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>Vue-router案例</title>
	<script src="js/vue.js"></script>
	<script src="js/vue-router.js"></script>
<style>
	html,body,#app{
		height: 100%;
		margin:0;	
	}
	.login_container{
		background-color: #2b4b6b;
		height: 100%;
	}
	.login_box{
		 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>

  

原文地址:https://www.cnblogs.com/seeding/p/14621185.html