如何实现div按列排列、自适应换行并自动居中（禁用Bootstrap）

我来给你梳理两种纯CSS的实现方案，完全符合你的需求，不用依赖任何框架：

方案一：Flexbox 布局（兼容性好，适合大多数场景） #

Flexbox是实现这类布局最直观的方式，代码简洁易维护：

HTML 结构 #

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <!-- 可以继续添加更多盒子 -->
</div>

CSS 代码 #

.container {
  /* 启用Flex布局 */
  display: flex;
  /* 一行放不下时自动换行 */
  flex-wrap: wrap;
  /* 核心：让每行盒子在可用空间内居中，父容器宽度足够时自动填满（无侧边空白） */
  justify-content: center;
  /* 可选：设置盒子之间的上下左右间距 */
  gap: 16px;
  /* 可选：给容器添加上下内边距，避免盒子贴边 */
  padding: 16px 0;
}

.box {
  /* 固定宽高 */
  width: 200px;
  height: 200px;
  /* 你的红色盒子样式 */
  background-color: #ff4444;
  /* 可选：添加圆角、阴影等美化效果 */
  border-radius: 8px;
}

效果说明：

• 当父容器宽度能容纳多个盒子时，盒子会自动填满整行，不会留侧边空白；
• 如果父容器宽度不够放下完整一行（比如容器宽700px，每个盒子200px，一行最多放3个），这3个盒子会整体居中，左右留白均匀，不会出现左对齐留右侧大空白的情况；
• 盒子数量超出一行时，自动换行，每行的盒子都会保持居中对齐。

方案二：CSS Grid 布局（更适合精准控制网格的场景） #

Grid布局在处理网格类布局时更强大，同样能完美匹配你的需求：

CSS 代码（HTML结构和上面一致） #

.container {
  /* 启用Grid布局 */
  display: grid;
  /* 核心：自动生成尽可能多的固定宽度列，完全适配容器宽度 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 200px));
  /* 让整个网格在容器内居中，解决非整数倍宽度的留白问题 */
  justify-content: center;
  /* 盒子之间的水平+垂直间距 */
  gap: 16px;
  padding: 16px 0;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #ff4444;
  border-radius: 8px;
}

效果说明：

• repeat(auto-fill, minmax(200px, 200px)) 会根据容器宽度自动生成最多数量的200px宽列，完全填满容器宽度（无侧边空白）；
• 当容器宽度不是盒子宽度的整数倍时，justify-content: center会让整个网格居中，左右留白均匀；
• 盒子数量超出一行时，自动换行到下一行，保持整齐的网格对齐。

额外小提示 #

• 用gap属性设置盒子间距比给盒子加margin更省心，不会出现换行时的外边距叠加问题；
• 可以根据实际需求调整盒子的宽高、间距、内边距等参数；
• 两种方案的兼容性都很好，支持所有现代浏览器，IE11也能兼容Flexbox的核心功能。

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