css - 如何将背景图像定位::放在div的中心？

Question

我试图将 Logo 定位到页眉 div 的中心，一半的 Logo 溢出到底部 div。我有以下内容，但我不知道如何动态地将其设置为居中。因为依赖 top 和 left 值似乎会不一致。

.header {
    position: relative;
    height: 200px;
    background-color: #000;

    &:after {
        z-index: 2;
        content: ' ';
        position: absolute;
        left: 27%;
        top: 60%;
        width: 200px;
        height: 200px;
        background-image: url('images/logo.png');
    }
}

Answer 1

您可以使用 left: 50% 和负 margin-left( Logo 宽度的一半)。

.header {
  background-color: #000;
  position: relative;
  height: 200px;
}

.header:after {
  margin-left: -100px;
  position: absolute;
  background: #f00;
  bottom: -100px;
  height: 200px;
  width: 200px;
  content: ' ';
  z-index: 2;
  left: 50%;
}

<div class="header"></div>