新手提问，为什么这里display:flex;      align-items:center;不是能实现图片居中？

<!--pages/homePage/homePage.wxml-->
<text>pages/homePage/homePage.wxml</text>
<view class="container">
    <swiper class="homeSwiper" indicator-dots="false" autoplay="true" duration="1000">
        <swiper-item wx:for="{{HomePageImage}}" class="HomePageImage">
            <text class="homeSwiperNote">{{item.note}}</text>
            <image class="HomePageImage" src="{{item.imagePath}}"></image>
        </swiper-item>
    </swiper>
</view>

 页面wxss

/* pages/homePage/homePage.wxss */
 .homeSwiper {
    height:40vh;
    width:100vw;
} 

.homeSwiperNote{
    position: absolute; 
    line-height: 1.5em;
    font-size: small;
    right: 50rpx;   
}

.homeSwiperImage{  
    display:flex;
     align-items:center;    
}

app.wxss

/**app.wxss**/
.container {
  position: absolute; 
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  padding: 10rpx 5rpx;
   /* box-sizing: border-box; */