Bootstrap布局下如何实现图片垂直居中并保持盒子等高？

嘿，我之前做电商卡片的时候也踩过一模一样的坑！给你几个亲测有效的方案，完美解决你的需求：

方案一：用Bootstrap 5内置的比例工具类（最省心） #

Bootstrap 5已经自带了aspect-ratio系列类，直接用就能搞定1:1比例，还不用自己写CSS。同时配合object-fit属性让图片居中显示，再用flex布局保证所有卡片高度一致：

修改后的HTML代码 #

<div class="product d-flex flex-column h-100"> <!-- 加flex布局和h-100保证卡片高度统一 -->
  <div class="product-img aspect-ratio-1x1 overflow-hidden"> <!-- 1:1比例容器 -->
    <img src="http://127.0.0.1:8080/SpGames/admin/gameimage.jsp?game_id=1" 
         alt="Product image" 
         class="img-fluid h-100 w-100 object-fit-contain"> <!-- 图片自适应+居中 -->
  </div>
  <div class="product-body flex-grow-1 d-flex flex-column justify-content-between"> <!-- 内容区自动填充剩余空间 -->
    <div>
      <p class="product-category">Category</p>
      <h3 class="product-name"><a href="#">product name goes here</a></h3>
      <h4 class="product-price">$980.00 <del class="product-old-price">$990.00</del></h4>
      <div class="product-rating">
        <i class="fa fa-star"></i>
        <i class="fa fa-star"></i>
        <i class="fa fa-star"></i>
        <i class="fa fa-star"></i>
        <i class="fa fa-star"></i>
      </div>
    </div>
    <div class="product-btns">
      <button class="add-to-wishlist"><i class="fa fa-heart-o"></i><span class="tooltipp">add to wishlist</span></button>
      <button class="add-to-compare"><i class="fa fa-exchange"></i><span class="tooltipp">add to compare</span></button>
      <button class="quick-view"><i class="fa fa-eye"></i><span class="tooltipp">quick view</span></button>
    </div>
  </div>
  <div class="add-to-cart">
    <button class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i> add to cart</button>
  </div>
</div>

关键说明：

• aspect-ratio-1x1：直接让容器保持1:1宽高比，浏览器缩放时自动适配
• object-fit-contain：让图片在容器内按比例缩放，上下左右留白均等（如果要铺满容器用object-fit-cover）
• d-flex flex-column h-100：让卡片成为flex容器并占满高度，保证所有卡片高度一致
• flex-grow-1：让product-body自动填充卡片的剩余空间，避免内容少的卡片高度不够

方案二：自定义CSS兼容Bootstrap 4或更早版本 #

如果你还在使用Bootstrap 4，没有内置的aspect ratio类，可以用经典的padding-top技巧（你之前没成功应该是没设置定位）：

自定义CSS #

.product {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-img {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 1:1比例，padding-top百分比基于父元素宽度 */
  overflow: hidden;
}
.product-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持图片比例，居中显示 */
}
.product-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

为什么你之前的padding-top方法失效？
因为你没给product-img设置position: relative，也没把图片设为绝对定位，导致padding-top把容器撑大后，图片还是按正常流布局，所以比例失调。加上定位后，图片会相对于容器居中，完美解决留白问题。

最后验证 #

不管用哪种方案，记得给所有的.product卡片都加上对应的类，这样所有卡片的高度就会完全一致，图片也能在1:1容器里垂直水平居中，浏览器缩放时自动适配。

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