Question

我试图将徽标放在标题div的中心，徽标的一半溢出到底部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（徽标宽度的一半）。

.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>

Answer 2

我可以建议使用flexbox吗？

将为您处理居中逻辑，然后您只需确保背景图像正确定位。

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

    &:after {
        content: '';
        height: 100%;
        display: flex;
        background: url('http://i.imgur.com/9My4X1v.jpg');
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: center;
    }
}

https://jsfiddle.net/JackHasaKeyboard/9azLwx22/10/

如何将背景图像定位到div的中心？

2 个答案: