嵌入内容居中布局求助：将RSS.app NBA新闻轮播居中于图片与屏幕间

我正尝试让嵌入的RSS内容在背景图与屏幕中心之间居中显示，通过rss.app工具将谷歌新闻的NBA板块嵌入到了网站中，已经卡了很久，需要帮助。附上我的HTML代码，CSS文件可以提供。

提供的HTML代码 #

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>

<body>

  <nav class="navbar">
    <div class="content">
      <div class="logo">
        <a href="home.html">Home</a>
      </div>
      <ul class="menu-list">
        <div class="icon cancel-btn">
          <i class="fas fa-times"></i>
        </div>
        <li><a href="home.html">Home</a></li>
        <li><a href="news.html">News</a></li>
        <li><a href="records.html">Records</a></li>
        <li><a href="games.html">Games</a></li>
        <li><a href="images.html">Images</a></li>
      </ul>
      <div class="icon menu-btn">
        <i class="fas fa-bars"></i>
      </div>
    </div>
  </nav>
  <div class="banner">
    <div style="margin-top: 1000;">
      <rssapp-carousel id="8ywhL4ZjvQvQv5Zz"></rssapp-carousel>
      <script src="https://widget.rss.app/v1/carousel.js" type="text/javascript" async></script>
    </div>
  </div>
  <div class="about">
    <script>
      const body = document.querySelector("body");
      const navbar = document.querySelector(".navbar");
      const bannerTitle = document.querySelector(".bannerTitle");
      const menuBtn = document.querySelector(".menu-btn");
      const cancelBtn = document.querySelector(".cancel-btn");
      menuBtn.onclick = () => {
        navbar.classList.add("show");
        menuBtn.classList.add("hide");
        body.classList.add("disabled");
      }
      cancelBtn.onclick = () => {
        body.classList.remove("disabled");
        navbar.classList.remove("show");
        menuBtn.classList.remove("hide");
      }
      window.onscroll = () => {
        this.scrollY > 20 ? navbar.classList.add("sticky") : navbar.classList.remove("sticky");
        this.scrollY > 20 ? bannerTitle.classList.add("sticky") : bannerTitle.classList.remove("sticky");
      }
    </script>


</body>

</html>

第一步：修正HTML中的错误 #

先把margin-top: 1000改成带单位的写法，比如margin-top: 100px，否则这个样式不会生效。

第二步：通过CSS实现居中布局 #

在你的style.css中添加以下样式，根据背景图的实际情况调整数值：

/* 配置banner容器，适配背景图并提供居中基础 */
.banner {
  position: relative;
  /* 替换成你的背景图路径 */
  background-image: url('你的背景图地址');
  background-size: cover;
  background-position: center;
  /* 减去导航栏高度，避免内容被遮挡，根据实际导航栏高度调整 */
  min-height: calc(100vh - 60px);
  display: flex;
  justify-content: center; /* 水平居中 */
  /* 调整垂直位置，实现"背景图与屏幕中心之间"的效果，可按需修改百分比 */
  align-items: flex-start;
  padding-top: 25vh;
  padding-left: 20px;
  padding-right: 20px;
}

/* 限制RSS内容容器宽度，避免过宽 */
.banner > div {
  width: 100%;
  max-width: 800px;
  /* 额外确保水平居中 */
  margin: 0 auto;
}

补充说明 #

• 如果导航栏是固定定位（position: fixed），一定要保证.banner的min-height或padding-top足够，避免内容被导航栏遮挡。
• 要是需要更精准的垂直位置，可以把padding-top换成margin-top，或者调整align-items的属性值（比如用center直接垂直居中，再结合margin-top微调）。
• 如果现有CSS中已经有.banner的样式，把上述属性合并进去即可；如果还是达不到预期效果，可以提供你的style.css内容，再针对性调整。

内容的提问来源于stack exchange，提问作者Dimitri Saha