在HTML / CSS flexbox中居中图像

Question

我有一堆弹性物品，基本上是一张照片和其他信息。我不太确定如何对齐标题，以便它们始终在同一行中。图像应居中。我当时使用的是flexbox，但我正在研究CSS网格来帮助解决我的问题，但是我不确定是否可以使用flexbox来做到这一点，尽管我不确定是否需要添加一些flex-align标签。

<div class="pet-list">
  <div class="pet-item" ng-class="{'selected' : data.votedPet == pet.sys_id}" ng-repeat="pet in data.pets">
    <img class="img-responsive pet-image center-block" src="{{pet.photo}}"/>
    <div class = "pet-info">
      <h3>
        {{pet.name}}
      </h3>
      <p>
        Owner: {{pet.submitted_by}}
      </p>
      <p>
        {{pet.comments}}
      </p>
      <div class="button-container">
        <button ng-if="data.votedPet != pet.sys_id" ng-disabled= "c.disabled()" ng-click="c.vote(pet)" class="btn btn-info" role="button">
          Vote for {{pet.name}}! </button>
      </div>
    </div>
  </div>
</div>


    .selected {
    border-style: solid;
  border-width: 5px;
  border-color: #142667;
}

.pet-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
}

.pet-image{
  vertical-align: top;
}

.banner{
  display: flex;
  justify-content: center;
  align-items: center;
}

.button-container{
  display: flex;
  justify-content: center;
  margin: 3%;
}

.pet-info{
background-color: #142677;
  position: relative;
}

.pet-info h3, p{
  color: white;
}

.pet-item{
  font-size: 16px;
  margin: 10px 1%;
  max-width: 310px;
  overflow: hidden;
  display: flex;
  padding: 0.5em;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}




@media all and (min-width: 40em) {
  .pet-item {
    width: 50%;
  }
}
@media all and (min-width: 60em) {
  .pet-item {
    width: 33.33%;
  }
}

编辑：如果信息足够大，则信息始终位于底部，图片始终位于顶部。