Html 在CSS中将div保持在BG图像的中心

我遇到的问题是，我正在努力保持我的暴动游戏文本流畅，当我调整浏览器大小时，它似乎卡在了原来的位置。无论是左侧还是右侧，通常右侧从S的末端到窗口的一侧有更多的空间

//showcase只是一个容器
//包含背景图像。
.展示{
位置：相对位置；
宽度：100%；
身高：35.76em；
文本对齐：居中；
背景：url(https://www.riotgames.com/darkroom/original/d6120739b8bf25995d5c43e69b9ce85d:bf411966145dd8b6b0f224e372aa27e5/annie.jpg);
背景重复：无重复；
背景位置：中心；
背景尺寸：封面；
}
//信息文本是主文本
//我试着保持中心和流畅**
.info文本{
颜色：白色；
位置：绝对位置；
文本转换：大写；
字母间距：1px；
字体系列：“蒙特塞拉特”，无衬线；
字体大小：6.5em；
字体大小：粗体；
保证金：0；
最高：15%；
左：25%；
}
//我刚刚添加了flex box属性，希望能够修复它，
//但我不太确定它是让事情变得更糟还是真的有所帮助。
@仅介质屏幕和（最大宽度：768px）{
.电网{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
对齐内容：居中对齐；
}
.info文本{
显示器：flex；
弯曲方向：行；
柔性包装：nowrap；
对齐内容：居中对齐；
高度：25vh；
保证金：0；
文本转换：大写；
字母间距：1px；
字体系列：“蒙特塞拉特”，无衬线；
字体大小：3.5em；
字体大小：粗体；
最高：38%；
左：10%；
保证金：0；
}

欢迎

英雄联盟

您可以使用flexbox来处理容器上的此属性（本例中的背景图像）：

例如：

.showcase{
位置：相对位置；
宽度：100%；
身高：35.76em；
文本对齐：居中；
背景：url(https://www.riotgames.com/darkroom/original/d6120739b8bf25995d5c43e69b9ce85d:bf411966145dd8b6b0f224e372aa27e5/annie.jpg);
背景重复：无重复；
背景位置：中心；
背景尺寸：封面；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.info文本{
颜色：白色；
位置：绝对位置；
文本转换：大写；
字母间距：1px；
字体系列：“蒙特塞拉特”，无衬线；
字体大小：6.5em；
字体大小：粗体；
}
@仅介质屏幕和（最大宽度：768px）{
.info文本{
字体大小：3.5em；
}
}

欢迎

英雄联盟

这太棒了！我正在尝试找出这些显示：值除了flex之外还有什么作用，如果你不介意的话，可以告诉我吗？我正在努力在google上找到关于它们的任何答案。谢谢你的帮助！嘿，迪伦，没问题！当然。显示：-webkit box；显示：-moz box；显示：-ms flexbox；显示：-webkit flex；是用于交叉浏览器兼容性的属性（使flexbox工作）->，对齐项是告诉所有子元素居中并对齐内容定义子元素的对齐->明白了！我还找到了另一种解决问题的方法，告诉信息文本向左推50%，然后使用transform:translatex（-50%）；最后也工作了。：D

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;