Html CSS在大于屏幕的元素之前居中

我有一个css before元素，我希望它在屏幕上居中，而不管屏幕大小。before元素中有一个图像。不管我怎么做，它仍然是左对齐的

footer{
    position: relative;
    padding: 20em 0 2em;
    color: #fff;
}
footer::before {
    content: '';
    position: absolute;
    top: 0;
    width: 2000px;
    height: 1371px;
    background: url(../images/el-footer.svg) center top no-repeat;
    transform: translateY(-40%);
}

我还尝试添加了

left:50%

和

transform:translateX（-50%）

，但所做的只是将其保留50%

---

如果有人能帮我解决问题，或者为我指出如何使图像始终居中的正确方向，那就太好了。

您需要设置相对容器的宽度/高度，并将图像放置在：：before标记中

页脚{
位置：相对位置；
宽度：100%；
高度：600px；
填料：20em 0 2em；
颜色：#fff；
背景：#ccc；
}
页脚：：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
保证金：自动；
宽度：300px；
高度：300px；
背景：url(https://loremflickr.com/320/240)不重复；
}

乱数假文

您需要设置相对容器的宽度/高度，并将图像放置在：：before标记中

页脚{
位置：相对位置；
宽度：100%；
高度：600px；
填料：20em 0 2em；
颜色：#fff；
背景：#ccc；
}
页脚：：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
保证金：自动；
宽度：300px；
高度：300px；
背景：url(https://loremflickr.com/320/240)不重复；
}

乱数假文

您可以在

元素之前的
中使用此选项：

left: 0;
right: 0;
margin: auto;

它将使您的图像水平居中。
您可以在
：在
元素之前使用它：

left: 0;
right: 0;
margin: auto;

它将使图像水平居中