Html 在div&；中对齐图像；从卡中给div空间

所以我试着制作一张小小的“卡片”，来展示有关产品的信息。现在我想在顶部画一张每个产品的小照片，但我需要将其垂直和水平居中

我还需要给图像/div一点空间，尝试做边距顶部：1em；但是什么也没做

以下是我的HTML代码：

<div class="container">
  <div class="row">
    {% for auction in auctions%}
    <div class="col-sm-4">
      <div class="auction-item">
        <div class="img-container">
          <img
            src="/static/img/grass.png"
            alt="Grass Block"
            class="item-icon"
          />
        </div>
        <h2>{{ auction.name }}</h2>
        <div class="average-price">
          <h3>Average Price: {{ auction.start_bid }}</h3>
        </div>
        <div class="time-left">
          <h3>Time Left: time</h3>
        </div>
        <div class="graph-div">
          <a class="graph-tag" href="#">Show Graph</a>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>

下面是它现在的样子：

---

当您希望将某些内容精确放置在中心位置时，请始终记住使用

位置（相对和绝对），这将有助于数据位于元素中

使用
flex
和
vertical align
（可选）居中
使用
top:5%
在
.img container{…}

。拍卖品{
宽度：275px；
高度：320px；
背景颜色：蓝色；
边界半径：25px；
保证金：3em；
}
.img集装箱{
宽度：64px；
高度：64px；
边界半径：50%；
背景色：#333；
保证金：自动；
文本对齐：居中；
显示器：flex；
垂直对齐：中间对齐；
位置：相对位置；
最高：5%；
}
.项目图标{
边界半径：50%；
宽度：100%；
身高：100%；
位置：绝对位置；
}
.拍卖品h2{
颜色：白色；
字体大小：24px；
文本对齐：居中；
垫面：1米；
}
.拍卖品h3{
颜色：白色；
字体大小：20px；
文本对齐：居中；
垫面：1米；
}
.graph分区{
文本对齐：居中；
垫面：1米；
}
.图形标签{
颜色：白色；
字体大小：20px；
}

{%用于拍卖中的拍卖%}
{{auction.name}
平均价格：{auction.start_bid}
剩余时间：时间
{%endfor%}
在容器css中添加（位置：相对）

.img-container {
width: 64px;
height: 64px;
border-radius: 50%;
background-color: #333;
margin-top: 1em;
margin: auto;
text-align: center;
position: relative;

}

和你的图像类添加

.item-icon {
width: 80%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: absolute;

}
啊！谢谢：）
.item-icon {
width: 80%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: absolute;