Html 如何垂直对齐图像和文本？

所以我需要将图像和文本垂直居中。然而，我的代码出现了一些错误，我不知道为什么。我可以让文本居中，但是，图像不是我不知道为什么。有什么想法吗？ 这是到目前为止我的代码

.container{
高度：300px；
宽度：300px；
位置：相对位置；
边框：3倍纯黑；
背景色：透明；
}
.中心{
位置：绝对位置；
最高：50%；
左：50%；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
.设置{
宽度：100px；
高度：100px；
}
.connecttext{
颜色：#000；
文本对齐：居中；
}

连接文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

将此添加到

.center

：

.center{
显示器：flex；
放置项目：中心；
...
}

有关参考信息，请参阅和。

.center {
display: flex;
justify-content: center; //for horizontal 
align-items: center; //for vertically align 
}