Html 如何继承某个位置（CSS）

经过大约2个小时的研究，我找不到解决问题的方法，我试图继承背景的中心，因为“模糊框”会随着计算机分辨率的不同而变大

它看起来像这样（笔记本电脑分辨率）： 我想让它显示背景图像的中心，而不是角落

*{
保证金：0；
填充：0；
}
html{
宽度：100vw；
高度：100vh；
}
身体{
背景重复：无重复；
背景附件：固定；
背景尺寸：封面；
背景位置：顶部；
背景图片：url(https://images.unsplash.com/photo-1477346611705-65d1883cee1e?dpr=0.800000011920929&auto=format&fit=crop&w=1199&h=800&q=80&cs=tinysrgb&crop=);
宽度：100%；
身高：100%；
字体系列：Arial，Helvetica；
字母间距：0.02em；
字体大小：400；
-webkit字体平滑：抗锯齿；
}
.模糊盒子{
位置：固定；
宽度：550px；
高度：670px；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
背景：继承；
边界半径：2px；
溢出：隐藏；
}
.模糊盒子：之后{
内容：''；
宽度：1000px；
高度：1000px；
背景：继承；
位置：绝对位置；
底部：0；
框阴影：插入0 0 200px rgba（255，255，255，0.05）；
过滤器：模糊（10px）；
}
.用户登录框{
位置：相对位置；
边缘顶部：50px；
文本对齐：居中；
z指数：1；
}
.用户登录框>*{
显示：内联块；
}

此处文本

您基本上已经很好了，请删除创建问题的

translate（）

，并使用

margin:auto

将元素居中：

正文{
背景重复：无重复；
背景附件：固定；
背景尺寸：封面；
背景位置：顶部；
背景图片：url(https://images.unsplash.com/photo-1477346611705-65d1883cee1e?dpr=0.800000011920929&auto=format&fit=crop&w=1199&h=800&q=80&cs=tinysrgb&crop=);
保证金：0；
高度：100vh；
字体系列：Arial，Helvetica；
字母间距：0.02em；
字体大小：400；
-webkit字体平滑：抗锯齿；
}
.模糊盒子{
位置：固定；
宽度：550px；
高度：670px；
排名：0；
左：0；
底部：0；
右：0；
保证金：自动；
背景：继承；
边界半径：2px；
溢出：隐藏；
}
.模糊盒子：之后{
内容：''；
宽度：1000px；
高度：1000px；
背景：继承；
位置：绝对位置；
底部：0；
框阴影：插入0 0 200px rgba（255，255，255，0.05）；
过滤器：模糊（10px）；
}
.用户登录框{
位置：相对位置；
边缘顶部：50px；
文本对齐：居中；
z指数：1；
}
.用户登录框>*{
显示：内联块；
}

此处文本

我不清楚您的问题是什么。您是否可以包含足够的代码来构成一个完整的模型，并清楚地解释所需的行为、实际行为以及它们之间的区别？也许通过图片可以帮助传达所需的信息？@AlexanderNied My bad，我将添加更多信息。另外，请添加更多您试图实现的信息。你想让另一个元素在框的水平和垂直中心居中吗？@tacoshy添加了更多信息。所以我理解你的意思，你只是想让模糊的框居中？为什么不简单地使用

flexbox

+

justify content:center；对齐项目：居中？您还可以使用
背景位置
直接在css中对图像进行cenetr。