使用CSS居中HTML DIV失效，问题出在哪里？

问题概述 #

做学校作业时，我创建了日历（image-grid）和新闻（news-grid）两个带网格系统的DIV，但切换到移动端视图时这两个网格无法居中。试过清除浮动、margin: 0 auto;和justify-content: center;这些方法，都没解决问题。

问题根源 #

1. 图片固定宽度限制：图片设置了固定宽度（image-grid img为200px，news-grid img为350px），移动端屏幕宽度不足时，网格容器会被图片撑开超出视口，导致无法居中。
2. 浮动元素干扰：.column2设置了float: right，移动端下会让容器脱离文档流，破坏居中布局逻辑。
3. 网格列数未适配移动端：当前网格列数固定为2列和3列，移动端需要调整为更适配的列数（比如1列），同时让内容自适应宽度。

解决方案 #

1. 修正浮动容器的移动端表现 #

给.column2添加媒体查询样式，移除浮动并让容器居中：

@media (max-width: 768px) {
  .column2 {
    float: none;
    margin: 0 auto;
    max-width: fit-content; /* 容器宽度适配内容 */
  }
}

2. 让图片自适应宽度 #

把图片的固定宽度改为width: 100%，同时保留max-width限制大屏下的尺寸：

.image-grid img {
  width: 100%;
  max-width: 200px; /* 保留原最大宽度 */
  height: 200px;
  border-radius: 3px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}

.news-grid img {
  width: 100%;
  max-width: 350px; /* 保留原最大宽度 */
  height: 245px;
  border-radius: 3px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}

3. 调整移动端网格列数与居中 #

用媒体查询修改网格列数为1列，同时让网格项和容器居中：

@media (max-width: 768px) {
  .image-grid {
    grid-template-columns: 1fr;
    justify-items: center; /* 网格项居中 */
    max-width: fit-content;
    margin: 0 auto;
  }

  .news-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    max-width: fit-content;
    margin: 0 auto;
  }
}

4. 优化新闻按钮结构 #

把新闻按钮从news-grid内移到row1下，和日历按钮结构保持一致，确保移动端居中生效：

<div class="row1">
  <h2>NYHETER</h2>
  <!-- 新闻图片网格 -->
  <div class="news-grid">
    <div>
      <a href="https://www.mynewsdesk.com/se/hogskolanvast/news/kroenika-en-satsning-med-bara-vinnare-477416" target="_blank"><img src="images/nyheter1.png" alt="Kalender bild 1"></a>
    </div>
    <div>
      <a href="https://www.mynewsdesk.com/se/hogskolanvast/news/industrin-maaste-se-bortom-den-digitala-tekniken-477049" target="_blank"><img src="images/nyheter2.png" alt="Kalender bild 2"></a>
    </div>
    <div>
      <a href="https://www.mynewsdesk.com/se/hogskolanvast/news/nya-former-foer-samverkan-mellan-hoegskolan-vaest-och-kommuner-477152" target="_blank"><img src="images/nyheter3.png" alt="Kalender bild 1"></a>
    </div>
  </div>
  <!-- 按钮移到网格外 -->
  <a href="https://www.mynewsdesk.com/se/hogskolanvast" target="_blank" class="newsbutton">Se flera nyheter</a>
</div>

修改后的完整CSS代码 #

.wrapper {
  margin: 0 auto;
  height: auto;
  max-width: 1100px;
  padding: 2em;
  margin-top: 30px;
}

.column2 {
  float: right;
}

.column2 a {
  text-decoration: none;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.image-grid img {
  width: 100%;
  max-width: 200px;
  height: 200px;
  border-radius: 3px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}

.calendarbutton {
  background-color: #3f8c9c;
  width: 200px;
  height: 50px;
  border: none;
  font-family: "Alternate Gothic Cond ATF", Helvetica, sans-serif;
  color: #fff;
  font-size: 1.5rem;
  text-align: center;
  line-height: 3rem;
}

.calendarbuttondiv {
  display: flex;
  justify-content: center;
  clear: both;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.news-grid img {
  width: 100%;
  max-width: 350px;
  height: 245px;
  border-radius: 3px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}

.newsbutton {
  background-color: #3f8c9c;
  width: 200px;
  height: 50px;
  margin: 0 auto;
  border: none;
  font-family: "Alternate Gothic Cond ATF", Helvetica, sans-serif;
  color: #fff;
  font-size: 1.5rem;
  text-align: center;
  line-height: 3rem;
  margin-bottom: 150px;
  display: block; /* 确保margin:auto生效 */
}

.row1 {
  margin-top: 120px;
}

.row1 a {
  text-decoration: none;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .column2 {
    float: none;
    margin: 0 auto;
    max-width: fit-content;
  }

  .image-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    max-width: fit-content;
    margin: 0 auto;
  }

  .news-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    max-width: fit-content;
    margin: 0 auto;
  }
}

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