Html 如何将此图像和悬停效果居中？

我不熟悉HTML和CSS。 请帮助我对齐我在下面的代码片段中使用的图像和悬停效果（覆盖和文本）。我用的是FlexBox，但有点搞砸了对齐，可能是我做错了

.container{
位置：相对位置；
宽度：50%；
显示器：flex；
证明内容：柔性端；
对齐项目：居中；
对齐内容：居中对齐；
}
h1{
文本对齐：居中；
字体大小：50px；
颜色：灰色；
}
.形象{
显示：块；
宽度：100%；
高度：自动；
}
.覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：100%；
不透明度：0；
过渡：放松；
背景色：#008CBA；
边界半径：10px；
}
.文本{
颜色：白色；
背景色：#008CBA；
不透明度：0；
边界半径：25px；
字体大小：100px；
位置：绝对位置；
最高：50%；
左：50%；
填充：10px；
过渡：0.8s缓解；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
文本对齐：居中；
}
.container:悬停。覆盖{
不透明度：0.5；
}
.container:hover.text{
不透明度：1；
}

叠加效果
嗨，苏！

您需要添加边距：0自动；到您的容器类。这将使容器和其中的图像居中

.container{
保证金：0自动；
位置：相对位置；
宽度：50%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
对齐内容：居中对齐；
}
h1{
文本对齐：居中；
字体大小：50px；
颜色：灰色；
}
.形象{
宽度：100%；
高度：自动；
}
.覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：100%；
不透明度：0；
过渡：放松；
背景色：#008CBA；
边界半径：10px；
}
.文本{
颜色：白色；
背景色：#008CBA；
不透明度：0；
边界半径：25px；
字体大小：100px；
位置：绝对位置；
最高：50%；
左：50%；
填充：10px；
过渡：0.8s缓解；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
文本对齐：居中；
}
.container:悬停。覆盖{
不透明度：0.5；
}
.container:hover.text{
不透明度：1；
}

覆盖层
叠加效应
嗨，苏！

您没有正确使用flex。我以正确的方式应用了更改

.container{
显示器：flex；
证明内容：中心；
对齐项目：居中；
对齐内容：居中对齐；
}
.container>div{
宽度：50%；
位置：相对位置；
}
h1{
文本对齐：居中；
字体大小：50px；
颜色：灰色；
}
.形象{
宽度：100%；
高度：自动；
}
.覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：100%；
不透明度：0；
过渡：放松；
背景色：#008CBA；
边界半径：10px；
}
.文本{
颜色：白色；
背景色：#008CBA；
不透明度：0；
边界半径：25px；
字体大小：100px；
位置：绝对位置；
最高：50%；
左：50%；
填充：10px；
过渡：0.8s缓解；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
文本对齐：居中；
}
.container>div:hover.overlay{
不透明度：0.5；
}
.container>div:hover.text{
不透明度：1；
}

覆盖层
叠加效应
嗨，苏！

您提供的链接显示，悬停时，第二幅图像正好位于第一幅图像的中心。你想改变什么还不清楚。准确描述问题所在。你不喜欢什么。你想怎么样，噢！我只是错过了一个密码。。。谢谢只是有一个疑问，像这样做是一种好的做法，还是一种更好的方式来调整事情？没问题，这发生在我们所有人身上。嗯，我总是用它来制作div或image。我发现了这个有用的链接，它很好地解释了中心问题，谢谢。这是一个非常有用的链接，非常欢迎！顺便说一句，本网站解释了{margin left:auto；margin right:auto；}我的代码是这两个代码的快捷方式，所以{margin:0 auto；}这很有意义，而且很容易记住，因为你想将左右边距居中是的，我是FlexBox的新手。我看到你把宽度和位置从.container{}移到了.container>div{}为什么？！因为据我所知，这是正确的方法。可能是我错了，但根据我的说法，这是更好的代码：）如果您的实现是正确的，那么justify content应该让您的div本身与中心对齐。但根据我的经验，您的实现是错误的。我按照您的建议进行了尝试，悬停效果在容器外激活。！这是因为悬停效果仍在容器div上应用。我也更改了该样式。请检查更新的答案。