<分区>
标签 html css bootstrap-4
<分区>
我希望登录表单以登录页面为中心，我尝试使用 align-items-center 和 justify-content-center ( https://codepen.io/sanesanyo/pen/vveNqE ) 但它仍然从顶部开始。如果有人可以帮助我，我将非常高兴。花了很多时间，还没找到解决办法。
非常感谢。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta content='IE=Edge' http-equiv='X-UA-Compatible'>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="app.css">
<title>Dein Immobilien Centre - Das Portal für Zwangsversteigerungen in Deutschland</title>
</head>
<body id="login" style="height:800px">
<nav id="mainNavbar" class="navbar navbar-dark navbar-expand-xl pt-10 pb-0 fixed-top">
<a href="index.html" class="navbar-brand"><img src="ImmoCenterDeinLogo.jpg" style="width: 240px; height: 50px" alt=""></a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item">
<a href="index.html" class="nav-link">HOME</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">ÜBER UNS</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">ANGEBOTE</a>
</li>
<li class="nav-item">
<a href="katalog.html" class="nav-link">KATALOG</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">KONTAKT</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">IMPRESSUM</a>
</li>
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Sign Up <i class="fas fa-user-plus"></i></a>
</li>
<li class="nav-item">
<a href="login.html" class="nav-link">Login <i class="fas fa-user"></i></a>
</li>
</ul>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<section class="container-fluid px-0">
<div class="row align-items-center justify-content-center">
<div class="col-lg-6">
<div id="headingGroup" class="text-white text-center mt-5" >
<h2 class="display-2">" "</h2>
<h2 class="display-2">DEIN<span>/</span>IMMOBILIEN<span>/</span>CENTER</h2>
<h2 class="display-3">Dein Neues Zuhause</h2>
</div>
</div>
</div>
<div class="row align-items-center justify-content-center">
<div class="col-lg-6">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
最佳答案
添加高度100%
<section class="container-fluid px-0" style="height: 100%;">
<div class="row align-items-center justify-content-center" style="height: 100%;">
关于html - 我无法获得以登录页面为中心的登录表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53957608/