想要一个这样效果的布局

但是我的图片不能居中  要怎么写

代码如下：

wxml：

<view class='table'>

<view class='t1'>

<image class='img_icon' src='../../images/hy.jpg'></image>

<button bindtap="gotomeeting">会议系统</button>

</view>

<view class='t1'>

<image class='img_icon' mode='scaleToFill' src='../../images/hy.jpg'></image>

<button bindtap="gotomeeting">会议系统</button>

</view>

</view>

<view class='table'>

<view class='t1'>

<image class='img_icon' src='../../images/hy.jpg'></image>

<button bindtap="gotomeeting">会议系统</button>

</view>

<view class='t1'>

<image class='img_icon' mode='scaleToFill' src='../../images/hy.jpg'></image>

<button bindtap="gotomeeting">会议系统</button>

</view>

</view>

wxss：

.table

{

display: flex;

flex-direction: row;

align-items: center;

margin-top: 0px;

}

.t1

{

width: 50%;

border: 1px solid gray;

align-items: center;

}

.img_icon

{

width: 200rpx;

height: 200rpx;

align-items: center;

}

还有就是 有什么其他写法吗？我这个写法是不是很蠢