Div not centered and footer moves up-CodePudding

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/

* {
  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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

<nav >
  <div >
    <a  href="#">Navbar</a>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span ></span>
    </button>
    <div  id="navbarNav">
      <ul >
        <li >
          <a  aria-current="page" href="#">Home</a>
        </li>
      </ul>
    </div>
  </div>
</nav>


    <div >
        <div >
            <div >
                <img  src="https://duckduckgo.com/assets/common/dax-logo.svg" alt="LOGO">
                <div >
                    <h1>TEST</h1>
                    <h6>BLABLABLABLABLA</h6>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <div >

            <div >
                <span>TEST</span>
            </div>

            <ul >
                <a  target="_blank">TEST</a>
            </ul>
        </div>
    </footer>

CodePudding user response：

Try like this.

Set flex property into .wrapper.

Code

CodePudding user response：

You can try this, remove .home class style, and add

.wrapper {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
}

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

<nav >
  <div >
    <a  href="#">Navbar</a>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span ></span>
    </button>
    <div  id="navbarNav">
      <ul >
        <li >
          <a  aria-current="page" href="#">Home</a>
        </li>
      </ul>
    </div>
  </div>
</nav>


    <div >
        <div >
            <div >
                <img  src="https://duckduckgo.com/assets/common/dax-logo.svg" alt="LOGO">
                <div >
                    <h1>TEST</h1>
                    <h6>BLABLABLABLABLA</h6>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <div >

            <div >
                <span>TEST</span>
            </div>

            <ul >
                <a  target="_blank">TEST</a>
            </ul>
        </div>
    </footer>