个人资料卡片：如何使图片在div底部居中且实现响应式？

嘿，我来帮你搞定这个问题！你当前的代码在大屏下有效，但响应式失效的原因是用了left: 40%这种硬编码的百分比——当容器宽度变化时，这个固定百分比就没法保证图片居中了。下面给你两种不需要媒体断点的方案，轻松实现响应式居中：

方案一：改进绝对定位（兼容旧浏览器） #

利用left: 50%配合transform: translateX(-50%)，这个组合能让元素基于自身宽度水平居中，不管容器宽度怎么变都有效：

修改你的.top-card img CSS：

.top-card img{
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 4px solid white;
  position: absolute;
  left: 50%; /* 先把图片左边缘移到容器水平中点 */
  bottom: -40px; /* 保持原来的底部偏移 */
  transform: translateX(-50%); /* 再把图片往左挪自身宽度的一半，实现真正居中 */
}

其他CSS保持不变即可，这个方法不需要改布局结构，只调整图片的定位属性。

方案二：用Flex布局（现代推荐） #

如果不需要兼容非常老的浏览器，用Flex布局更简洁，天然响应式：

修改.top-card的CSS，把它改成Flex容器：

.top-card{
  background-image: url(/images/bg-pattern-card.svg);
  width: 100%;
  height: 40%;
  border-radius: 10px 10px 0 0 ;
  display: flex; /* 开启Flex布局 */
  justify-content: center; /* 子元素水平居中 */
  align-items: flex-end; /* 子元素垂直靠底部 */
}

然后调整图片的CSS，去掉绝对定位，用margin-bottom实现偏移：

.top-card img{
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 4px solid white;
  margin-bottom: -40px; /* 把图片拉到容器底部外面，和原效果一致 */
}

这种方法不需要依赖绝对定位，代码更清晰，而且Flex本身就是为响应式设计的，适配各种屏幕尺寸毫无压力。

完整代码示例（方案二） #

<div class="card-container">
  <div class="top-card">
    <img src="/images/image-victor.jpg" alt="icon" />
  </div>
  <div class="bottom-card"></div>
</div>

.card-container{
  width: 20vw;
  height: 45vh;
  background-color: aliceblue;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}
.top-card{
  background-image: url(/images/bg-pattern-card.svg);
  width: 100%;
  height: 40%;
  border-radius: 10px 10px 0 0 ;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.top-card img{
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 4px solid white;
  margin-bottom: -40px;
}

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