如何在屏幕宽度小于1049px时将DIV垂直堆叠并居中？

我有两个并排的<div>元素，左侧是文本类<div>，右侧是采用grid布局的<div>。已通过1050px至1280px的媒体查询实现屏幕缩小时调整网格行列的效果，但当屏幕宽度小于1049px时空间不足，需要实现：

• 两个<div>垂直堆叠（文本在上，grid在下）
• 无论屏幕宽度如何，两个<div>都居中显示

要实现需求，需先调整基础布局（避免float和absolute破坏文档流），再完善媒体查询逻辑。以下是修改后的完整代码：

HTML（无需修改） #

<div class="index-third">
  <div class="index-third-text">
    <p id="heading">How We Can Help You</p>
    <h4 id="subheading">Our Services</h4>
    <hr>
    <h5 id="body">The services we offer are to ensure seamless consultation <br> processes. These features intend to provide necessary <br> and effective remote medical support to those in need. <br> <br> Click on the buttons to learn more!</h5>
  </div>
  <div class="index-third-grid">
    <div class="item item-1">
      <i class="fa-solid fa-magnifying-glass"></i>
      <p>Search</p>
    </div>
    <div class="item item-2">
      <i class="fa-solid fa-check-to-slot"></i>
      <p>Consult</p>
    </div>
    <div class="item item-3">
      <i class="fa-solid fa-comment"></i>
      <p>Chat</p>
    </div>
    <div class="item item-4">
      <i class="fa-solid fa-list"></i>
      <p>Diagnose</p>
    </div>
    <div class="item item-5">
      <i class="fa-solid fa-bars-progress"></i>
      <p>Manage</p>
    </div>
    <div class="item item-6">
      <i class="fa-solid fa-star"></i>
      <p>Review</p>
    </div>
  </div>
</div>

修改后的CSS #

/* 父容器用flex控制子元素排列，默认大屏并排 */
.index-third {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto; /* 整体居中 */
}

.item {
  text-align: center;
  background-color: #fff;
  padding: 15px;
  width: 160px;
  height: 100px;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 1px 1px black;
}

.item p {
  margin-top: 20px;
}

.index-third-grid {
  display: grid;
  grid-template-columns: repeat(3, 160px); /* 匹配item宽度 */
  row-gap: 2em;
  column-gap: 2em;
  color: #704a1b;
  font-size: 20px;
  margin-top: 2rem;
}

.index-third-text {
  color: #614124;
  max-width: 400px;
}

.index-third-text p {
  font-size: 25px;
  margin: 0 0 1rem;
}

.index-third-text h4 {
  font-size: 35px;
  margin: 0 0 1rem;
}

.index-third-text hr {
  border: 0.5px solid #614124;
  width: 0;
  height: 120px;
  float: left;
  margin-right: 1.5rem;
}

.index-third-text h5 {
  font-size: 15px;
  line-height: 1.5;
  overflow: hidden; /* 配合hr的float布局 */
}

/* 1050px-1280px适配 */
@media screen and (min-width: 1050px) and (max-width: 1280px) {
  .index-third-grid {
    grid-template-columns: repeat(2, 160px);
  }
  body {
    overflow-x: hidden;
  }
}

/* 小于1049px适配 */
@media screen and (max-width: 1049px) {
  .index-third {
    flex-direction: column; /* 切换为垂直堆叠 */
    align-items: center; /* 子元素水平居中 */
    text-align: center;
  }

  .index-third-grid {
    grid-template-columns: repeat(2, 160px);
    margin-top: 2rem;
  }

  .index-third-text hr {
    float: none;
    margin: 0 auto 1rem;
  }
}

关键调整说明 #

1. 父容器用Flex布局：替代原有的float和absolute，让子元素自然排列，大屏时并排，小屏时通过flex-direction: column切换垂直堆叠，同时margin: 0 auto保证整体居中。
2. 移除绝对定位：文本元素的position: absolute会脱离文档流导致布局错乱，改用正常流布局，通过margin/padding控制间距。
3. Grid列数适配：根据屏幕宽度调整grid-template-columns列数，避免小屏幕内容溢出。
4. 文本居中优化：小屏幕下给父容器设置text-align: center，调整水平线布局，让文本整体居中显示。

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