所以我正在为我的网站制作一个登录页面，由于某种原因，网站只是浮动到右下角，所以每次我进入网站时，我都必须手动滚动，使其居中。我试着查找这个问题，但似乎找不到问题的屏幕在这里
这是HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="site.css">
<title>Login</title>
</head>
<body>
<div class="hero">
<div class="form-box">
<div class="button-box">
<div id="knop"></div>
<button type="button" class="toggle-btn">log In</button>
<button type="button" class="toggle-btn">register</button>
</div>
<div class="social-icons">
<img src="../site/fotos/duimpje.jpg">
<img src="../site/fotos/duimpje.jpg">
<img src="../site/fotos/duimpje.jpg">
</div>
<form class="input-group">
<input type="text" class="input-field" placeholder="user id" required>
<input type="text" class="input-field" placeholder="enterpassword" required>
<input type="checkbox" class="check-box"><span>remember password</span>
<button type="submit" class="submit-btn">log in</button>
</form>
</div>
</div>
</body>
</html>
这是CSS
.hero{
height: 100%;
width: 100%;
background-image: url(../site/fotos/duimpje.jpg);
background-position: center;
background-size: cover;
position: absolute;
}
.form-box{
width: 380px;
height: 480px;
position: relative;
margin: 6% auto;
background: white;
padding: 5px;
}
.button-box{
width: 220px;
margin: 35px auto;
position: relative;
box-shadow:0 0 20px 9px grey;
border-radius: 30px;
}
.toggle-btn{
padding: 10px 30px;
cursor: pointer;
background: transparent;
border: 0;
outline: none;
position: relative;
}
#knop{
top: 0;
left: 0;
position: absolute;
width: 110px;
height: 100%;
background:linear-gradient(to right, #ff105f,#ffad06);
border-radius: 30px;
transition: .5s;
}
.social-icons{
margin: 30px auto;
text-align: center;
}
.social-icons img{
width: 30px;
margin: 0 12px;
box-shadow: 0 0 20px 0 #7f7f7f3d;
cursor: pointer;
border-radius: 50%;
}
.input-group {
top: 180px;
position: absolute;
width: 280px;
transition: .5s;
}
.input-field{
width: 100%;
padding: 10px 0;
margin: 5px 0;
border-left: 0;
border-top: 0;
border-right: 0;
border-bottom: px solid #999;
outline: none;
background: transparent;
}
.submit-btn{
width: 85%;
padding: 10px 30px;
cursor: pointer;
display: block;
margin: auto;
background: linear-gradient(to right, #ff105f,#ffad06);
border: 0;
outline: none;
border-radius: 30px;
}
大多数web浏览器都会为<body>元素添加边距。
如果你不想要这个余量，你需要在你的CSS文件中指定以下代码：
body {
margin: 0;
}