HTML/CSS新手求助：如何将header置于页面顶部且保持container居中

问题说明 #

我是HTML/CSS新手，原本页面body中的container容器处于页面中间。尝试添加包含logo、导航栏（navbar）和Contact按钮的header元素后，无法实现将header固定在页面顶部，同时让container保持居中的效果。

当前效果如下：

原代码 #

CSS代码 #

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #03a9f4;
  transition: 1s;
  flex-direction: column;
}

.container {
  position: relative;
  width: 800px;
  height: 400px;
  background: rgba(0, 0, 0, 0.125);
  display: flex;
  justify-content: center;
  align-items: center;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
}

HTML代码 #

<header>
  <img class="logo" src="images/logo.png" alt="logo" />
  <nav>
    <ul class="nav_links">
      <li><a href="#">Home</a></li>
      <li><a href="#">Create</a></li>
      <li><a href="#">Help Listings</a></li>
    </ul>
  </nav>
  <button class="cta">Contact</button>
</header>
<div class="container">
  <div class="box signin">
    <h2>Already Have An Account?</h2>
    <button class="signinBtn">Sign In</button>
  </div>
  <div class="box signup">
    <h2>Don't Have An Account?</h2>
    <button class="signupBtn">Sign Up</button>
  </div>
  <div class="formBx">
    <div class="form signinform">
      <form>
        <h3>Sign In</h3>
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Password">
        <input type="submit" value="Login">
        <a href="#" class="forgot">Forgot Password</a>
      </form>
    </div>
    <div class="form signupform">
      <form>
        <h3>Sign Up</h3>
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Email Address">
        <input type="password" placeholder="Password">
        <input type="password" placeholder="Confirm Password">
        <input type="submit" value="Register">
        <!-- give a warning if the user has caps lock on -->
      </form>
    </div>
  </div>
</div>

修改方案 #

只需调整CSS样式即可实现需求，修改后的代码如下：

body {
  min-height: 100vh;
  background: #03a9f4;
  transition: 1s;
  margin: 0; /* 移除浏览器默认外边距，避免横向滚动条 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

header {
  position: fixed; /* 固定到页面顶部 */
  top: 0;
  left: 0;
  width: 80%; /* 配合左右10%的padding，总宽度占满屏幕 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
  background: rgba(0, 0, 0, 0.1); /* 添加背景色，防止下方内容穿透显示 */
  z-index: 100; /* 确保header在所有元素上方 */
}

.container {
  position: relative;
  width: 800px;
  height: 400px;
  background: rgba(0, 0, 0, 0.125);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0; /* 若container被header遮挡，可设置为header的总高度（比如100px） */
}

/* 可选：优化导航栏样式 */
.nav_links {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.nav_links a {
  color: #fff;
  text-decoration: none;
}

.cta {
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

关键修改点说明 #

• 固定Header：给header添加position: fixed、top: 0和left: 0，让它始终停留在页面顶部；设置width: 80%配合padding: 30px 10%保证内容不贴边；添加background避免下方内容透过header显示，z-index:100确保header不会被其他元素覆盖。
• 调整Body样式：添加margin:0移除浏览器默认的外边距，避免出现横向滚动条，同时保留原有的flex布局让container居中。
• 避免遮挡：如果container被header挡住，只需给container设置margin-top，值等于header的总高度（比如header上下padding各30px，总高度约80px，设置margin-top:100px即可）。

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