如何在HTML中将文本置于图像的中心？

我一直在尝试将文本居中放置在图像上，但它不会居中。我在这里研究了关于堆栈溢出的各种问题，但没有一个是有效的

页脚{
对齐内容：居中对齐；
证明内容：中心；
}
琼伯伦先生{
显示器：flex；
对齐项目：居中；
背景图像：url（'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Wave_Panorama.jpg/1024px-Wave_Panorama.jpg');
背景尺寸：封面；
颜色：#ffffff；
高度：500px；
文本阴影：0.25px 0.25px 0.25px 000000；
}
.jumbotron h2{
字体大小：60px；
字号：700；
保证金：0；
颜色：#fff；
文本对齐：居中；
位置：绝对位置；
文本对齐：居中；
保证金：0；
}

由我

使位置

相对

而不是

绝对

页脚{
对齐内容：居中对齐；
证明内容：中心；
}
琼伯伦先生{
显示器：flex；
对齐项目：居中；
背景图像：url（'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Wave_Panorama.jpg/1024px-Wave_Panorama.jpg');
背景尺寸：封面；
颜色：#ffffff；
高度：500px；
文本阴影：0.25px 0.25px 0.25px 000000；
}
.jumbotron h2{
字体大小：60px；
字号：700；
保证金：0；
颜色：#fff；
文本对齐：居中；
位置：相对；/*修改*/
文本对齐：居中；
保证金：0；
}

引导示例
由我

或者，你知道，只是稍微清理一下代码。。。 *移除superflous

容器，放入

flex:10它应该在哪里，并删除了一些其他非感官CSS以及


.jumbotron{
显示器：flex；
文本对齐：居中；
背景图像：url（'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Wave_Panorama.jpg/1024px-Wave_Panorama.jpg');
背景尺寸：封面；
颜色：#ffffff；
高度：500px；
文本阴影：0.25px 0.25px 0.25px 000000；
}
.文本中心{
弹性：110；
保证金：自动；
}
.jumbotron h2{
字体大小：60px；
字号：700；
文本对齐：居中；
}

由我
“只需稍微清理一下代码…”-这会神奇地修复它吗？或者你是否也做了根本性的改变？你应该说明你做了什么来“清理”它，以及为什么以前的方法不起作用。您的解决方案很好，因为它使用了flex box功能，而没有添加额外的
位置
声明。但是很好，我会编辑一下描述。