无需JS实现动态数量div两行排列：末行元素垂直居中

完全可以不用JavaScript实现这个需求，下面提供两种纯CSS方案，均基于单个父容器结构，无需多容器嵌套：

方案一：Flexbox 布局 #

Flexbox 可以通过换行控制和伪元素占位，完美适配动态子项数量：

代码实现 #

/* 单个父容器 */
.single-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem; /* 子项间的间距，可自定义 */
  justify-content: space-between; /* 前几行子项左右对齐，占满容器宽度 */
  padding: 1rem;
}

/* 子元素样式 */
.child-div {
  flex: 0 0 calc(50% - 0.75rem); /* 减去一半间距，确保两个子项刚好占满一行 */
  min-width: 220px; /* 可选：设置最小宽度，避免窄屏时子项过挤 */
  background: #f0f0f0;
  padding: 1.5rem;
  box-sizing: border-box;
}

/* 伪元素占位，解决奇数子项最后一行居中问题 */
.single-container::after {
  content: "";
  flex: 0 0 calc(50% - 0.75rem);
  visibility: hidden;
}

效果说明 #

• 子项数量为偶数时，每行自动排列2个元素，左右对齐占满容器宽度
• 子项数量为奇数时，最后一个元素会和伪元素形成“虚拟一行”，通过space-between实现视觉上的水平居中
• 所有子项动态适配父容器宽度，无需手动调整

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

CSS Grid 天生适合行列布局控制，代码更精简：

代码实现 #

/* 单个父容器 */
.single-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 固定2列，自动平分容器宽度 */
  gap: 1.5rem; /* 子项间的间距 */
  padding: 1rem;
  justify-items: center; /* 子项在单元格内水平居中，若需占满列宽可去掉此行 */
}

/* 子元素样式 */
.child-div {
  background: #f0f0f0;
  padding: 1.5rem;
  box-sizing: border-box;
  width: 100%; /* 若需子项占满列宽，添加此行 */
}

效果说明 #

• 无论子项数量奇偶，Grid 自动按2列排列，偶数时每行2个，奇数时最后一行仅1个
• 通过justify-items: center实现最后一个子项的水平居中；若需要子项占满整列宽度，去掉此行并给子项添加width:100%即可
• 布局逻辑清晰，无需额外伪元素处理

两种方案均无需 JavaScript 介入，完全依靠 CSS 实现动态布局需求，且符合单个父容器包含所有子元素的结构要求。

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