Flexbox响应式卡片布局：单张卡片时如何实现水平居中？

针对动态增减的卡片列表，以下几种CSS方案可实现只剩一张卡片时水平居中：

方案一：Flexbox + 伪类实现 #

如果卡片容器采用Flex布局，可通过伪类精准控制单张卡片的样式：

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* 保留卡片间间距 */
  justify-content: flex-start; /* 默认靠左对齐 */
}

/* 容器内仅存在一张卡片时，强制居中 */
.card-container:has(.card:only-child) {
  justify-content: center;
}

注：:has()选择器兼容绝大多数现代浏览器，若需兼容旧版本，可改用给唯一卡片加外边距的写法：

.card-container .card:only-child {
  margin: 0 auto;
}

方案二：Grid布局适配 #

若使用Grid实现自适应卡片，同样可通过伪类调整对齐方式：

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  justify-items: start; /* 默认靠左 */
}

.card-container:has(.card:only-child) {
  justify-items: center;
}

方案三：旧浏览器兼容方案 #

如果需要兼容不支持:has()的浏览器，可通过JS辅助切换类名：

// 每次卡片增减后调用此函数
function adjustCardAlignment() {
  const container = document.querySelector('.card-container');
  const cardCount = container.querySelectorAll('.card').length;
  container.classList.toggle('single-card', cardCount === 1);
}

对应CSS样式：

.card-container.single-card {
  justify-content: center; /* Flex布局用此属性 */
  /* Grid布局替换为 justify-items: center; */
}

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