如何让轮播图中的图片始终居中显示？

当前轮播图仅特定分辨率图片能居中，设置.item的margin: 0 auto和text-align: center未生效，核心原因是没有针对<img>元素设置适配的居中样式，同时需确保图片在固定尺寸的轮播项内保持比例且不溢出。

解决方法 #

1. 给轮播项.item启用Flex布局，利用Flex对齐属性快速实现图片的水平+垂直居中
2. 对<img>设置尺寸限制，确保图片不超出轮播项范围，同时保留原有比例
3. 移除HTML中无效的text-align="center"属性（该属性属于CSS，不能直接写在HTML标签上）

修改后的完整代码 #

CSS 代码

.carousel-control.left,
.carousel-control.right {
  background-image: none;
}

.carousel-control>.fa {
  font-size: 40px;
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-block;
  margin-top: -20px;
}

.item {
  width: 1100px;
  height: 500px;
  /* Flex布局实现内部元素居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 轮播项自身水平居中 */
  margin: 0 auto;
}

.item img {
  /* 限制图片最大尺寸，避免溢出轮播项 */
  max-width: 100%;
  max-height: 100%;
  /* 保持图片比例，完整显示内容 */
  object-fit: contain;
}

HTML 代码

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
    <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
  </ol>

  <div class="carousel-inner">
    <div class="item active">
      <img src="https://thumbs.gfycat.com/ShallowRawCockatoo-size_restricted.gif" alt="First slide">
    </div>

    <div class="item">
      <img src="https://thumbs.gfycat.com/ShallowRawCockatoo-size_restricted.gif" alt="Second slide">
    </div>

    <div class="item">
      <img src="https://thumbs.gfycat.com/ShallowRawCockatoo-size_restricted.gif" alt="Third slide">
    </div>

  </div>

  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="fa fa-angle-left"></span>
  </a>

  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="fa fa-angle-right"></span>
  </a>
</div>

补充说明 #

• Flex布局的居中方案兼容性好，能同时实现水平和垂直居中，无需额外计算
• object-fit: contain会让图片按原比例缩放，完整显示在轮播项内，不会出现拉伸或裁剪问题
• 如果仅需水平居中，也可以保留.item的text-align: center，同时给img设置display: inline-block和max-width: 100%，但Flex布局的效果更稳定

内容的提问来源于stack exchange，提问作者J a z s