[Project review-vue2.0] How to make the box content of flex-wrap layout horizontally and vertically aligned

 Requirements: Use v-for to implement a box layout with two rows and two columns. The pictures and text in the box need to be centered horizontally and vertically

accomplish:

html:

<div class="container">
    <div v-for="(item,index) in list" :key="index" class="item">
        <img :src="item.src" />
        <div class="title">{
   
   {item.title}}</div>
    </div>
</div>

css:

/* scss */
.container {
    display: flex;
    flex-wrap: wrap;
    width: 固定宽度
    
    .item {
        width: 用外层盒子宽度/每行item的个数
        display: flex;
        flex-direction: column;
        align-items: center;

        img: {
            height: 设定高度
        }

        .title {
            /* 文字样式 */
        }

    }

}