Div goes up when the browser window shrinks

Question

I would like the div (home) to be in the middle of the page and that the footer always stays down. The problem however is that when I now shrink the browser window, that the div moves to the top

And I use Bootstrap 5

Excuse my bad English, I hope I could bring it across reasonably understandable

CODE: https://jsfiddle.net/odbefhLy/

 .navbar { background-color: var(--primary-color); border-top: 2px solid #5f8dd3; padding-top: 30px; font-weight: bold; }.home { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }.logo { height: 200px; width: 200px; border: 5px solid #5f8dd3; border-radius: 100%; }.text h1, h6 { color: var(--font-color); text-transform: uppercase; text-align: center; } footer { height: 55px; font-size: 12px; text-decoration: none; font-weight: bold; text-transform: uppercase; color: var(--font-color); position: absolute; right: 0; left: 0; bottom: 20px; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> </ul> </div> </div> </nav> <div class="container"> <div class="row"> <div class="home"> <img class="logo d-block mx-auto mb-4" src="https://duckduckgo.com/assets/common/dax-logo.svg" alt="LOGO"> <div class="text"> <h1>TEST</h1> <h6>BLABLABLABLABLA</h6> </div> </div> </div> </div> <div class="container"> <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top"> <p class="col-md-4 mb-0 text-muted">&copy; 2021 Company, Inc</p> <a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none"> <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> </a> <ul class="nav col-md-4 justify-content-end"> <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Home</a></li> </ul> </footer> </div>

Answer 1

try this

.container {
    position: relative;
    height: 100vh;
}

.container .home {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Answer 2

 .navbar { background-color: var(--primary-color); border-top: 2px solid #5f8dd3; padding-top: 30px; font-weight: bold; } /*CHANGED*/.home { } /*CHANGED*/ body { display: flex; flex-direction: column; min-height: 100vh; }.logo { height: 200px; width: 200px; border: 5px solid #5f8dd3; border-radius: 100%; }.text h1, h6 { color: var(--font-color); text-transform: uppercase; text-align: center; } /*CHANGED*/ footer { height: 55px; font-size: 12px; text-decoration: none; font-weight: bold; text-transform: uppercase; color: var(--font-color); margin-top: auto; }

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> </ul> </div> </div> </nav> <:-- CHANGED --> <div class="container flex-grow-1 d-flex align-items-center justify-content-center"> <div class="row"> <div class="home"> <img class="logo d-block mx-auto mb-4" src="https.//duckduckgo.com/assets/common/dax-logo;svg" alt="LOGO"> <div class="text"> <h1>TEST</h1> <h6>BLABLABLABLABLA</h6> </div> </div> </div> </div> <div class="container"> <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top"> <p class="col-md-4 mb-0 text-muted">&copy, 2021 Company: Inc</p> <a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none"> <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> </a> <ul class="nav col-md-4 justify-content-end"> <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Home</a></li> </ul> </footer> </div>