如何实现每行5个等宽元素水平对齐且最后一行剩余元素居中？

有两种简洁可行的实现方案，分别基于Flexbox和Grid布局，都能满足你“每行固定5个元素、最后一行剩余元素居中”的需求，具体如下：

方案一：Flexbox布局（兼容性更广） #

利用Flexbox的换行和对齐属性，结合固定宽度计算，轻松实现需求：

HTML结构（沿用你的代码） #

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <!-- 更多元素... -->
</div>

CSS代码 #

.box {
  display: flex;
  flex-wrap: wrap; /* 元素超出一行时自动换行 */
  justify-content: center; /* 控制每行元素对齐，不足一行时居中 */
  gap: 10px; /* 可选：设置元素间距，可按需调整 */
}

.box > div {
  /* 固定元素宽度：容器宽度减去4个间隙后，平均分给5个元素 */
  flex: 0 0 calc((100% - 4 * 10px) / 5);
  /* 可选样式：美化元素 */
  background-color: #f5f5f5;
  padding: 12px;
  text-align: center;
}

原理说明 #

• flex-wrap: wrap 让元素在超出容器宽度时自动换行；
• justify-content: center 控制每行元素对齐：当一行刚好5个元素时，总宽度填满容器，视觉上撑满整行；当最后一行元素不足5个时，剩余空间均匀分布在元素两侧，实现居中；
• flex: 0 0 固定宽度 确保元素不会被拉伸或压缩，保持统一尺寸。

如果不需要元素间距，代码可简化为：

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box > div {
  flex: 0 0 20%; /* 5个元素刚好占满100%容器宽度 */
  background-color: #f5f5f5;
  padding: 12px;
  text-align: center;
}

方案二：Grid布局（代码更简洁） #

Grid布局天生擅长二维网格排列，实现该需求高效直观：

CSS代码 #

.box {
  display: grid;
  /* 定义5个等宽列，计算方式同Flexbox */
  grid-template-columns: repeat(5, calc((100% - 4 * 10px) / 5));
  gap: 10px; /* 元素间距 */
  justify-content: center; /* 网格整体居中，最后一行不足元素时自动居中 */
}

.box > div {
  background-color: #f5f5f5;
  padding: 12px;
  text-align: center;
}

原理说明 #

• grid-template-columns: repeat(5, ...) 直接定义每行5个等宽列；
• justify-content: center 让整个网格在容器内居中，当最后一行元素不足5个时，元素会在网格对应位置上，整体呈现居中效果；
• gap 直接设置元素间的行列间距，无需额外计算。

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