相对于其兄弟元素居中

Question

我正在使用 ReactJS 进行编码。 我有一个底部的 NavBar 和我的主页的内容。我希望我的主页内容相对于底部导航栏居中。 我没有意识到如何为两个兄弟姐妹实现这一目标。

const HomeLogo = () => {
  return (
    <Container className="homeLogo">
      <Row className="d-flex justify-content-center">
        <Image src={logo}/>
      </Row> 
    </Container>
  );
};

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

这是我的 CSS：

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

我希望徽标的顶部和底部长度相等。请看图片1

这里是代码的沙盒链接：

https://codesandbox.io/s/long-wood-4tzin?file=/src/components/Home.js

Answer 1

在 HTML 和 CSS 中做一些更改（在沙箱代码中）：

在 home.js 中将任意三个包装在一个 div 中：

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

在NavBar.js中，添加这个类：

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

最后，在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;
}

Answer 2

我希望你解决这个问题，请按照下面的代码;我正在分享沙盒代码链接 Sandbox Code可以看现场演示

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;
}