HTML/CSS技术求助：导航栏居中及主内容文本置顶问题

问题根源 #

1. 导航栏无法居中：原代码中.navbar的translate语法错误，硬编码的left:38%无法精准适配不同屏幕；同时Bootstrap默认的ms-auto类会强制导航项靠右，与居中需求冲突。
2. 主内容位置偏移：.main-display使用top:100%会把内容推到视口底部，多重定位属性叠加导致布局混乱，无法贴合导航栏下方显示。

修复方案 #

1. 导航栏居中调整

• 移除.navbar的position: absolute、left:38%、translate: -50，改用Flex布局实现全局居中
• 将Bootstrap导航栏的ms-auto替换为mx-auto，让导航项水平居中
• 保留导航栏高度与垂直居中样式，保证视觉一致性

2. 主内容置顶调整

• 移除.main-display的position: absolute、top:100%、transform: translate(-50%, -50%)，改用padding-top给导航栏预留空间
• 保留文本居中与动画效果，确保内容紧贴导航栏下方

修复后的完整代码 #

CSS部分

.navbar {
  height: 80px;
  display: flex;
  align-items: center;
  font-size: 120%;
  width: 100%;
  justify-content: center;
}

.nav-link-home {
  text-decoration: none;
  color: white;
}

.nav-link {
  color: white;
  text-decoration: none;
}

.navbar * {
  font-size: 100%;
}

@font-face {
  font-family: Oswald;
  src: url("../fonts/Oswald-Medium.ttf");
}

* {
  font-family: Oswald, serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

.nav-item {
  color: white;
  text-decoration: none;
}

#mainPage {
  background-image: url(https://www.pixelstalk.net/wp-content/uploads/images1/Shadows-Backgrounds-HD.jpg);
  min-height: 100vh;
  width: 100%;
  background-size: cover;
  background-position: center;
  color: aliceblue;
  padding-top: 100px;
}

.main-display {
  text-align: center;
  animation: fadeInOut;
  animation-iteration-count: 2;
  animation-duration: 3s;
}

@keyframes fadeInOut {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

#about-me {
  background-color: lightblue;
  min-height: 100vh;
  width: 100%;
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  text-align: center;
  padding-top: 20px;
}

#border-line-about {
  display: none;
}

.about-me-pics {
  margin-top: 70px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
}

.about-me-pics figure {
  margin: 0;
}

#about-page-text {
  margin-top: 20px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

HTML部分

<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Personal Project</title>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  <link rel="stylesheet" href="assets/css/aos.css">
  <link rel="stylesheet" href="style.css">

</head>

<body>

  <nav class="navbar sticky-top navbar-expand-lg">
    <div class="container">
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Projects</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <section id="mainPage">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="main-display">
            <h1 id="name-title">Mazin Esmail</h1>
            <h2>Software Developer</h2>
            <h2>Student</h2>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="about-me">
    <div class="container">
      <div class="row">
        <div class="heading-about">
          <h1 id="about--me" class="display-5">About me</h1>
        </div>
      </div>
    </div>
    <div class="about-page-text">
      <p>Hello!, I am a student at Cal State San Bernardino and I am studying the field of computer science. I love going out to view new things and play the sports that I love. As an aspiring software engineer I want to solve real life problems and create web applications to further thrive a positive impact to the world. </p>
    </div>

    <div class="about-me-pics">
      <figure id="las-vegas-pic">
        <img src="assets/img/IMG_0525.jpeg" height="400" width="400" />
        <figcaption>Las Vegas, Nevada</figcaption>
      </figure>

      <figure id="basketball-pic">
        <img src="assets/img/IMG_0816.jpeg" height="400" width="400" />
        <figcaption>Fontana, California</figcaption>
      </figure>

      <figure id="mountain-pic">
        <img src="assets/img/IMG_2825.jpeg" height="400" width="400" />
        <figcaption>Fontana, California</figcaption>
      </figure>
    </div>
  </section>

  <script src="assets/js/bootstrap.bundle.min.js"></script>
  <script src="https://kit.fontawesome.com/8c2adfc9c1.js" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>
</body>

</html>

额外优化说明 #

• 清理了原代码中重复定义的冗余样式
• 移除无效的多重定位属性，简化布局逻辑
• 使用gap替代硬编码margin，让图片布局更适配不同屏幕
• 添加全局盒模型重置，避免默认边距干扰布局

内容的提问来源于stack exchange，提问作者mazin esmail