在CSS中使用Flexbox/Grid模糊以容器为中心的图像背景

我被难住了。我想创建如下内容：

其中背景是相同的图像，但模糊。限制是图像必须在容器中居中

我有这样的想法：

<div className="image-container">
  <img className="image-to-show" url>
  <div className="image-bg"/>
</div>

---

问题是我无法将图像对齐以显示到中心，因为图像容器有3个div，所以它还将考虑图像bg。如何将背景模糊添加到该图像中，并将图像置于容器的中心？我想把背景图像添加到容器中，但是如果我在上面添加模糊，整个容器就会变得模糊

这很容易实现，请查看代码片段。要获得清晰的结果，请在运行代码段后单击整个页面

body，html{
身高：100%；
保证金：0；
}
.bg图像{
背景图像：url（“https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTbDSiyg7FTcSl0C5Y1SNyXtIn6y5QZ_eUbvbmTwXeWJ2dXXl2ZiA&s");
过滤器：模糊（8px）；
-webkit过滤器：模糊（8px）；
/*全高*/
身高：100%；
/*将图像居中并精确缩放*/
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}
*在页面/图像中间位置的文本*/
.bg文本{
背景图像：url（“https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTbDSiyg7FTcSl0C5Y1SNyXtIn6y5QZ_eUbvbmTwXeWJ2dXXl2ZiA&s");
背景重复：无重复；
背景尺寸：500px 300px；
颜色：红色；
字体大小：粗体；
边框：3px实心#f1f1；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
z指数：2；
宽度：80%；
填充：20px；
文本对齐：居中；
}

模糊背景
我是无名氏

查看此链接，它似乎很有帮助

.image-container{
 display:flex,
 align:center
}

img.image-to-show{
 width:60%
}