如何实现圆形用户头像的响应式布局？聚焦两行居中布局场景

这里提供两种简洁的实现方式，都能满足你第一行两个元素、第二行单个元素居中的响应式需求：

方法一：使用 CSS Flexbox #

这种方式结构清晰，适合快速实现：

<div class="container">
  <div class="row-top">
    <div class="item">元素1</div>
    <div class="item">元素2</div>
  </div>
  <div class="item item-center">元素3</div>
</div>

.container {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 行之间的间距 */
  padding: 1rem;
}

.row-top {
  display: flex;
  gap: 1rem; /* 元素之间的间距 */
}

.item {
  padding: 1rem 2rem;
  background: #eee;
  border-radius: 4px;
}

.item-center {
  align-self: center; /* 让单个元素在容器中水平居中 */
}

/* 响应式适配（可选），根据需要调整断点 */
@media (max-width: 480px) {
  .row-top {
    flex-direction: column;
  }
  .item-center {
    align-self: stretch; /* 小屏幕下让元素占满宽度 */
  }
}

方法二：使用 CSS Grid #

这种方式更灵活，适合复杂布局场景：

<div class="grid-container">
  <div class="grid-item">元素1</div>
  <div class="grid-item">元素2</div>
  <div class="grid-item grid-center">元素3</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, auto); /* 第一行两列自适应宽度 */
  gap: 1rem;
  padding: 1rem;
}

.grid-item {
  padding: 1rem 2rem;
  background: #eee;
  border-radius: 4px;
}

.grid-center {
  grid-column: 1 / -1; /* 跨所有列 */
  justify-self: center; /* 水平居中 */
}

/* 响应式适配 */
@media (max-width: 480px) {
  .grid-container {
    grid-template-columns: 1fr; /* 小屏幕下单列布局 */
  }
  .grid-center {
    justify-self: stretch;
  }
}

两种方案都能完美实现你要的效果，Flexbox更适合简单的行列结构，Grid则在需要更复杂的网格排布时更有优势，你可以根据实际场景选择。

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