html5div 上下左右居中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Signin</title>
	<style type="text/css">
		
		* {
     
			margin: 0;
			padding: 0;
		}

		.SignNav {
     
			width: 100%;
			height: 100%; 
			position: absolute;
			display: flex;
			flex-direction: column;  	flex: 1;
			align-items:center;
			justify-content:center; 
			/*background-color: #e9edf6;*/
			  font-weight: bold;font-weight: normal;font-family: "Trebuchet MS","Myriad Pro",Arial,sans-serif;

			  background: url(Img/lgbj.jpg) ;  
		} 
		 .content {
     
            width: 300px;
            height: 400px;
            	 box-shadow: 2px 2px 10px #909090;
            	 border:1px solid #93b8bdcc;
            	 border-radius: 9px;

        }
        .login_title{
     color: #405c60;
        text-align: center;line-height: 35px;}

	</style>
</head>
<body>
<div class="SignNav"> 
	  		<div class="content">
				<div class="login_title" >用户统一登录界面

				</div>	
				<div class="login_fields" >
					<!-- 用户名
					密码
					验证码
					登录 -->

				</div>
	  		</div>
	 
	</div>
</body>
</html>

效果图:

html5div 上下左右居中_第1张图片
复古图书式样的背景居中div 做登录刚刚好

你可能感兴趣的:(html5)