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

Question

我在元素之前有一个 css，无论屏幕大小如何，我都希望它位于屏幕中心。 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%。

如果有人可以帮助我，或者为我指出如何让它始终居中的正确方向，那就太好了。

Answer 1

您需要将宽度/高度设置为相对容器并将图像定位在::before 标记中。

footer {
  position: relative;
  width: 100%;
  height: 600px;
  padding: 20em 0 2em;
  color: #fff;
  background: #ccc;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 300px;
  height: 300px;
  background: url(https://loremflickr.com/320/240) no-repeat;
}

<footer>
  lorem ipsum
</footer>