如何在flex布局中实现图片的居中显示？

问题根因 #

你设置的figure父容器宽度为100px，而内部的img宽度为200px，子元素宽度超出父容器，导致无法正常居中。

修复方案 #

可根据你的实际需求选择对应修改方式：

• 方案1：调整父容器宽度匹配图片宽度
  修改.features figure样式：

.features figure {
  margin: auto;
  width: 200px;
  text-align: center; /* 同步让下方figcaption文字居中 */
}

• 方案2：让图片宽度适配父容器
  修改.features figure img样式：

.features figure img {
  width: 100%;
  border: 1px solid rgb(196, 196, 196);
  border-radius: 10px;
  box-shadow: rgb(0, 0, 0) 0px 0px 10px;
}

• 方案3：补充flex容器对齐属性，让三个模块横向均匀分布
  修改.features样式：

.features {
  padding: 20px;
  display: flex;
  flex-direction: row;
  color: grey;
  justify-content: space-around; /* 新增属性 */
}

完整修复后代码示例 #

.features {
  padding: 20px;
  display: flex;
  flex-direction: row;
  color: grey;
  justify-content: space-around;
}
.features figure {
  margin: 0;
  width: 200px;
  text-align: center;
}
.features figure img {
  width: 200px;
  border: 1px solid rgb(196, 196, 196);
  border-radius: 10px;
  box-shadow: rgb(0, 0, 0) 0px 0px 10px;
}

<section class="features">
  <figure>
    <img src="https://via.placeholder.com/100" alt="E Girl Skin">
    <figcaption>Skin Uno Mununo</figcaption>
  </figure>
  <figure>
    <img src="https://via.placeholder.com/100" alt="Mario Skin">
    <figcaption>Skin Dosos</figcaption>
  </figure>
  <figure>
    <img src="https://via.placeholder.com/100" alt="E Boy Skin">
    <figcaption>Skin Treses</figcaption>
  </figure>
</section>

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