vue实现图片自适应居中

<template>
  <div id="app" :class="fls">
     <div :class="aa1" v-for="(item,index) in srcs" :key="index">
           <img :src="item" >
        </div>  
  </div>

</template>
<script>
export default {
  data(){
      return{
          srcs:[
               "/img/1.jpg",
               "/img/2.jpg",
               "/img/3.jpg",
          ],
          aa1:"a1",
          fls:"fl"     
      }
  }
}
</script>


<style>
  .fl{
    display: flex;
    justify-content: space-around;
  }
  .a1{
    border: 1px rgb(158, 16, 16) ridge;
    width: 200px;
    height: 200px;
  }
</style>