响应式article容器内350px宽度div单列居中问题求助

嘿，我完全懂你这闹心的处境——试了好几种方法都没法让移动端的子div乖乖居中，确实挺头疼的。其实问题大概率出在父容器的布局属性没设置到位，咱们换用现代的Flexbox或者CSS Grid来实现，比你之前用的老方法靠谱得多，代码还更简洁。

方案一：Flexbox实现（兼容性好，推荐） #

Flexbox是现在做响应式布局的首选，对齐和换行的问题它能轻松搞定。

先给父容器article设置PC端的基础样式，让子div自动排成两列，同时控制好间距：

.article {
  /* PC端基础布局 */
  display: flex;
  flex-wrap: wrap;
  /* 让子元素在容器内均匀分布，左右留空 */
  justify-content: space-around;
  /* 可选：设置子元素间的上下间距 */
  gap: 20px;
  padding: 20px 0;
}

.article > div {
  width: 350px;
  background: #f0f0f0;
  padding: 15px;
  box-sizing: border-box; /* 避免padding撑大宽度 */
}

然后写媒体查询，当屏幕宽度小于768px（你可以根据需求调整阈值），改成单列居中：

@media (max-width: 768px) {
  .article {
    /* 切换为垂直排列 */
    flex-direction: column;
    /* 让子元素水平居中 */
    align-items: center;
  }
  /* 也可以不用改flex-direction，直接给子元素加margin：
  .article > div {
    margin: 0 auto 20px;
  } */
}

方案二：CSS Grid实现（代码更简洁） #

如果你的项目不需要兼容特别老旧的浏览器，CSS Grid会更直观，代码量更少：

.article {
  /* PC端两列，每列固定350px，子元素间距20px */
  display: grid;
  grid-template-columns: repeat(2, 350px);
  gap: 20px;
  /* 让整个网格在父容器内居中 */
  justify-content: center;
  padding: 20px 0;
}

.article > div {
  background: #f0f0f0;
  padding: 15px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .article {
    /* 切换为单列 */
    grid-template-columns: 350px;
  }
}

为啥你之前的方法没生效？ #

• margin: 0 auto需要子元素是块级元素，同时父容器要有明确宽度（或者父容器是Flex/Grid容器），如果父容器是默认块级但没设宽度，子元素的margin:auto可能不会生效。
• left: 50% + margin-left: -175px这种方法需要子元素设position: absolute、父容器设position: relative，但会让子元素脱离文档流，容易影响其他元素布局，不是最优解。

直接把上面的代码复制过去试试，应该就能解决子div一直靠左的问题啦！

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