如何让页面Header与Main容器水平对齐且适配不同分辨率

核心问题分析 #

你之前的代码出现裁切，是因为给body设置了height:100vh，当页面内容高度超过视口时会被截断；同时两个容器仅靠justify-content:center居中，但内容宽度不统一，导致视觉上不对齐。下面是两种最简解决方法：

方法一：统一最大宽度+自动外边距（最简洁） #

给两个容器设置相同的最大宽度，用margin:0 auto实现水平居中，同时保留小屏幕的左右留白，适配所有分辨率。

修改后的完整代码 #

* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 0;
  /* 移除height:100vh，避免内容过长时被裁切 */
}
.header-container {
  display: flex;
  justify-content: center;
  gap: 1rem; /* 用gap统一子元素间距，替代零散margin */
  margin: 2rem auto; /* 上下保留间距，左右自动居中 */
  max-width: calc(1200px + 4rem); /* 对应main的3列最大宽度+列间距总和 */
  padding: 0 1rem; /* 小屏幕左右留白，避免内容贴边 */
}
.main-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 400px));
  column-gap: 2rem;
  row-gap: 3rem;
  margin: 0 auto 2rem; /* 上下保留间距，左右自动居中 */
  max-width: calc(1200px + 4rem); /* 和header保持一致的最大宽度 */
  padding: 0 1rem; /* 小屏幕左右留白 */
}
.header-item {
  background-color: lightblue;
  padding: 1rem;
}
.main-item {
  background-color: lightcoral;
  padding: 2rem;
}

<header class="header-container">
  <div class="header-item">Header Item</div>
  <div class="header-item">Header Item</div>
  <div class="header-item">Header Item</div>
  <div class="header-item">Header Item</div>
  <div class="header-item">Header Item</div>
  <div class="header-item">Header Item</div>
</header>
<main class="main-container">
  <p class="main-item">Main item</p>
  <p class="main-item">Main item</p>
  <p class="main-item">Main item</p>
  <p class="main-item">Main item</p>
</main>

方法二：父容器包裹（更灵活，适配复杂布局） #

如果后续页面需要添加侧边栏等元素，可将header和main放入同一个父容器中，统一控制宽度和居中，内部元素自动对齐。

修改后的完整代码 #

* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 0;
}
/* 新增统一包裹容器 */
.page-wrapper {
  max-width: calc(1200px + 4rem);
  margin: 0 auto;
  padding: 0 1rem;
}
.header-container {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0;
}
.main-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 400px));
  column-gap: 2rem;
  row-gap: 3rem;
  margin-bottom: 2rem;
}
.header-item {
  background-color: lightblue;
  padding: 1rem;
}
.main-item {
  background-color: lightcoral;
  padding: 2rem;
}

<div class="page-wrapper">
  <header class="header-container">
    <div class="header-item">Header Item</div>
    <div class="header-item">Header Item</div>
    <div class="header-item">Header Item</div>
    <div class="header-item">Header Item</div>
    <div class="header-item">Header Item</div>
    <div class="header-item">Header Item</div>
  </header>
  <main class="main-container">
    <p class="main-item">Main item</p>
    <p class="main-item">Main item</p>
    <p class="main-item">Main item</p>
    <p class="main-item">Main item</p>
  </main>
</div>

关键要点 #

1. 移除body的height:100vh，让页面高度自适应内容，避免裁切
2. 两个容器使用相同的最大宽度，确保内容区域宽度一致
3. 用margin:0 auto实现容器水平居中，替代align-items:center的强制居中方式
4. 添加左右padding，保证小屏幕下内容不会贴边

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