固定宽度居中

最新推荐文章于 2022-09-25 20:41:54 发布

雕琢时光纸戆

最新推荐文章于 2022-09-25 20:41:54 发布

阅读量462

点赞数

本文链接：https://blog.csdn.net/TISRNW/article/details/101060225

版权

一般的主题在页面足够大时（比主题要大），主题是会自动居中的。其实很简单，以上一篇的登录框为例在这里插入图片描述
QQ空间和这个登录框是会自动居中的。代码就是加一个div，让他margin左右auto就可以

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body {
				background-color: gray;
			}
			*{
				margin: 0px;
				padding: 0px;
				
			}
			body{
				height: 100%;
			}
			.container{
				width: 880px;
				margin: 0px auto;
				/*background-color: black;*/
				box-sizing: border-box;
				position: relative;
				top: 95px;
			}
			.container .logo{
				
				padding: 0px;
				margin: 0px;
				box-sizing: border-box;
			}
			
			.wrap {
				width: 414px;
				height: 312px;
				border: solid rgb(238, 238, 238) 2px;
				background-color: white;
				position: absolute;
				top: 0px;
				right: 0px;
				/*margin: 0px auto;*/
			}
			
			.wrap .title {
				margin-top: 6px;
				margin-bottom: 16px;
				font-size: 20px;
				color: rgb(51, 51, 51);
				text-align: center;
				/*居中*/
			}
			
			.wrap .infor {
				text-align: center;
				color: #666;
				font-size: 16px;
				margin-bottom: 36px;
			}
			
			.wrap .infor a {
				text-decoration: none;
				color: #3481cf;
			}
			
			.wrap #form {
				text-align: center;
				height: 150px;
				width: 272px;
				margin: 0px auto;
			}
			
			.wrap #form .input {
				height: 38px;
				width: 268px;
				box-sizing: border-box;
				padding: 10px;
				padding-right: 0px;
				margin-bottom: 17px;
				border-radius: 3px;
				border: solid rgb(214, 214, 21) 1px;
			}
			
			.wrap #form #btn {
				border-radius: 3px;
				height: 37px;
				width: 258px;
				padding: 1px 7px 2px 7px;
				box-sizing: content-box;
				border: none;
				background-color: rgb(136, 210, 48);
				color: white;
				font-size: 17px;
			}
		</style>
	</head>

	<body>
		<div class="container">
         <div class="logo" >
         	<img src="https://qzonestyle.gtimg.cn/qzone_v6/proj_qzonelogin/img/qzone-login-logo-dark.32@2x.png" width="251px" height="98px"/>
         </div>
			<div class="wrap">
				<!--登录框的最外部的框框-->
				<div class="title">
					<!--账号密码字体存放的div-->
					账号密码登录
				</div>
				<div class="infor">
					<!--第二行字存放的div-->
					推荐使用
					<a href="">快速安全登录</a>,防止盗号。
				</div>
				<form action="" method="post" id="form">
					<!--账号密码登录的一个from表单-->
					<input type="text" class="input" placeholder="支持QQ号/邮箱/手机号登录" />
					<input type="text" class="input" placeholder="密码" />
					<button type="button" id="btn">登 录</button>
					<!--简单来讲就是一个大的方块（wrap）包含了title，infor，from三大块的信息，from中又包含了账号，密码，登录三个块块-->

				</form>
			</div>
		</div>
	</body>

</html>