配置方法::背景画像の後にdivの中心に？

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

あなたが負margin-left（ロゴ幅の半分）とleft: 50%を使用することができます。

.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

私はフレキシボックスを示唆するかもしれませんか？

センタリングロジックが処理されるため、バックグラウンドイメージが正しく配置されていることを確認するだけで済みます。

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