如何利用Bootstrap根据屏幕尺寸居中个人资料图片？

嘿，我看了你的代码，问题出在你给头像加了固定的left:50px和top:-35px——这种固定像素值在响应式布局里肯定会出问题，不同屏幕尺寸下位置就乱了。咱们用Bootstrap的内置工具类来搞定响应式居中，不用写太多自定义CSS，更靠谱！

解决方案思路 #

• 利用Bootstrap的flex布局类实现水平居中，适配所有屏幕尺寸
• 去掉固定的像素定位，改用相对定位+transform来精准调整头像位置
• 简化HTML结构，让栅格布局更符合Bootstrap的规范

修改后的代码 #

HTML部分

<div class="col-md-12">
  <div class="col-md-2 col-xs-12">
    <div class="deck">
      <img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/kXlrGioGfFKOvibpsPzzGx16cP2.jpg" alt="list image" width="160">
    </div>
    <!-- 用Bootstrap的flex类实现水平居中 -->
    <div class="title-users-list-profile d-flex justify-content-center">
      <img class="comments-author" src="http://t0.gstatic.com/images?q=tbn:ANd9GcS_9j6SU0VDO8PQtsal3pvO2Xrp4eu2IbOYQVjLUDtRNQmn6PIBqDw3B4o" alt="image picture"/>
    </div>
  </div>
</div>

CSS部分

.deck {
  display: flex;
  justify-content: center; /* 让上方的封面图也居中，适配小屏幕 */
}

.comments-author {
  border-radius: 50%;
  border: 6px solid #fff;
  margin: 5px;
  box-shadow: 0 0 0 5px rgba(0,0,0,.2);
  width: 50px;
  height: 50px;
  position: relative;
  top: -35px; /* 只保留垂直方向的偏移，水平方向交给Bootstrap的flex类 */
}

/* 去掉原来的固定left和margin设置，用flex自动居中 */
.title-users-list-profile img {
  margin-top: 8px;
  margin-bottom: -25px;
}

效果说明 #

• 在中等屏幕（md及以上）：col-md-2会让容器变窄，d-flex justify-content-center确保头像始终在容器水平中间
• 在小屏幕（xs）：col-xs-12让容器占满整行，头像依然会居中显示，不会因为固定left值跑偏
• 垂直方向的top:-35px用来让头像叠加在封面图下方，这个值可以根据你的需求微调

这样修改后，头像就能在所有屏幕尺寸下都保持居中啦！

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