Html 如何在图像中心显示文本，其中有2行图像，每行4个图像

我希望每个图像上都有文字（中间），图像应该相邻，中间没有空格。每行有4个图像和2行，因此有8个文本。我要在图像上显示的每个文本都位于div块内（例如Subnautica图像具有文本：Subnautica）

.GameImage{
宽度：25%；
高度：180像素；
浮动：左；
}
.GameImage:悬停{
滤镜：模糊（1px）；
}

下面是一个将文本置于图像中心的基本代码

最重要的是，你必须使图像父对象的
位置
相对
和文本的
位置
绝对

然后使用
top
和
left
属性以及
transform
将其居中

有关CSS位置的更多信息，请参阅


*{
框大小：边框框；/*例如*/
}
.img集装箱{
位置：相对位置；
宽度：180px；
高度：180像素；
}
.img容器img{
宽度：100%；
身高：100%；
}
.img container.ImageText{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
保证金：0；
}

亚自闭症
您可以在容器上使用css，如下所示：

#愤怒的小鸟2图像{
位置：相对；/*必须设置父位置相对，以便将h4保持在其内部*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#愤怒鸟2图像h4{
位置：绝对；/*将其悬停在图像上*/
}