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标记中。

＆＃13;

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;
}

＆＃13;

<footer>
  lorem ipsum
</footer>

＆＃13;

Answer 2

您可以在:before元素上使用此功能：

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

它会使图像水平居中。

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

2 个答案: