Div not centered and footer moves up - html

Question

I would like the div (home) to be in the middle of the page. The problem with me is that when I shrink the browser window at the bottom, the footer moves up with it and then eventually disappears underneath. And should I reduce the page in the browser, so zoom out, then you can see that the logo and the text are not in the middle.
I can't get the footer to stay at the bottom and the logo and text to be in the middle of the page.
I use Bootstrap 5
CODE: https://jsfiddle.net/esznkh4r/3/
VIDEO: https://i.imgur.com/XRAX2bq.mp4
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100vh;
position: relative;
display: flex;
flex-direction: column;
}
.home {
padding-top: 150px;
}
.logo {
height: 200px;
width: 200px;
border-radius: 100%;
}
.text {
text-transform: uppercase;
text-align: center;
}
footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height:50px;
}
<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="wrapper">
<div class="home">
<div class="container">
<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>
<footer>
<div class="container d-flex flex-wrap justify-content-between align-items-center py-3">
<div class="col-md-4 d-flex align-items-center">
<span>TEST</span>
</div>
<ul class="nav col-md-4 justify-content-end d-flex">
<a class="mb-0 justify-content-end" target="_blank">TEST</a>
</ul>
</div>
</footer>

Answer 1

Try like this.
Set flex property into .wrapper.
Code

Answer 2

You can try this, remove .home class style, and add
.wrapper {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}

Answer 3

Just added some property in .home class
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100vh;
position: relative;
display: flex;
flex-direction: column;
}
.home {
padding: 150px 0;
flex: 1;
align-items: center;
justify-content: center;
}
.logo {
height: 200px;
width: 200px;
border-radius: 100%;
}
.text {
text-transform: uppercase;
text-align: center;
}
footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height:50px;
}
<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="wrapper">
<div class="home">
<div class="container">
<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>
<footer>
<div class="container d-flex flex-wrap justify-content-between align-items-center py-3">
<div class="col-md-4 d-flex align-items-center">
<span>TEST</span>
</div>
<ul class="nav col-md-4 justify-content-end d-flex">
<a class="mb-0 justify-content-end" target="_blank">TEST</a>
</ul>
</div>
</footer>