展示的图像揭示了小程序开发不可或缺的环节，我发现网络上的教程相对较少，因此我决定梳理自己在设计过程中遇到的问题，相信这能帮助你解决所面临的难题。
依据您提供的完整代码，遵循您的操作步骤，您应当能够成功调试。若遇到问题，请随时与我联系。
先给用到的代码以及效果图：
先给home.wxml程序：
1.图片居中（屏幕顶部）：
//.wxss里的参数
.imagesize{
设置布局属性为flexible布局模式；
居中对齐内容，沿水平轴线保持中心位置。
}
.imagesize image {
width:400rpx;
height:400rpx;
}
上面设置的图片尺寸，仅仅是为了方便看到实际的效果。
2.图片居中（中部，位置可调 → 和 -）
.imagesize{
display:flex;
该属性设置：高度为600像素；属于flex布局相关的高度参数。
对齐内容至中心位置；
使元素在垂直方向上居中对齐；
}
.imagesize image {
width:400rpx;
height:400rpx;
}
图中的数值分别为：，，，。
前两种都不适用全部型号手机，因为手机屏幕尺寸不固定。
但是，对于设计图片位置很有帮助。
3.图片居中（屏幕正中间）
代码：
page{
设置高度为100%，实现全屏显示。
}
.imagesize{
display:flex;
将布局高度设置为100%，确保其充满整个屏幕。
justify-content: center;
align-items:center;
}
.imagesize image {
width:400rpx;
height:400rpx;
}
看效果：
请提供完整的程序代码（前文已包含完整的代码，现在需要将新提供的代码合并至之前的文件夹中）。
home.wxml
home.wxss
page{
height:100%
}
.imagesize{
display:flex;
height: 100%;
justify-content: center;
align-items:center;
}
.imagesize image {
width:400rpx;
height:400rpx;
}
5.铺满屏幕：
单独讲铺满屏幕，主要用到mode=''
具体加在的程序段是.wxml：
以及.wxss的改变：
page{
height:100%
}
.imagesize{
display:flex;
height: 100%;
justify-content: center;
align-items:center;
}
换了一张图做演示：
看看不加的效果图：
所以还是很有用的。
这里由于是底部tab窗口，所以没有显示完整屏幕覆盖的图。
可以构思并制作启动时的画面设计，不过要注意选取恰当的图片比例，因为这会影响到最终的显示效果。此外，背景色彩与图片色彩的协调性也需要你在调试过程中加以留意。
推荐教程：《微信小程序》