Centering an element relative to its sibling

Do some changes in the HTML & CSS (in the sandbox code):

In the home.js wrap any three in a div:

<div className="parent">
  <div className="content">
  <HomeContent />
  <HomeContent />
  <HomeContent />
  </div>
  <NavBar />
</div>

In the NavBar.js, add this class:

  <Navbar className="nav" bg="dark" variant="dark" fixed="bottom">

Finally, in the app.css:

.parent {
  background-color: darkcyan;
  height: 100%;
  width: 100%;
  position: absolute;
}

.nav{
  height: 10%;
}

.content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 90%;
  background-color: red;
}

I hope you solve this problem please follow below code; I am share sandbox code link Sandbox Code you can see live demo

import Navbar from "./Navbar/Navbar";
import HomeLogo from "./HomeLogo/HomeLogo";

const Home = () => {
  return (
    <>
      <HomeLogo />
      <Navbar />
    </>
  );
};

export default Home;

const HomeLogo = () => {
  return (
    <div className="container">
      <div className="home-content">Home Logo Here</div>
    </div>
  );
};
export default HomeLogo;

const Navbar = () => {
  return <div className="navbar">Bottom Navbar</div>;
};
export default Navbar;

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  text-align: center;
}
.container {
  background-color: red;
  height: 100%;
  position: relative;
  height: 100vh;
}

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

.navbar {
  height: 50px;
  background-color: lightblue;
  text-align: center;
  line-height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 222;
}