水平居中固定背景图片

Question

我有一个背景图片，我想在其父“.bg-img”容器中水平居中。它应该保持固定在背景中，就像它的父母一样。我最终会有一些内容覆盖固定的背景。我尝试了margin-left / right：auto没有运气。我目前的黑客只是将图像的左侧属性设置为33％。但是，这显然不会使其保持中心。

codepen

<header class="header">
  <div class="header-top">
    <button class="order-btn">Order</button>
    <div class="icons">
      <div>icon 1</div>
      <div>icon 2</div>
    </div>
  </div>
  <div class="header-bottom">
    <h1 class="title">Little Big Burger</h1>
    <nav>
      <ul>
        <li><a>link1</a></li>
        <li><a>link1</a></li>
        <li><a>link1</a></li>
        <li><a>link1</a></li>
      </ul>
    </nav>  
  </div>
</header>


<main class="main-content">
  <div class="content-home">

  </div>
</main>
<div class="bg-img">
  <img src="https://static1.squarespace.com/static/5a281650b7411c88549962e0/t/5a2fe65af9619a816718a92e/1513088613996/Burger+Icon+-+Killens.png">
</div>

.header {
    width: 100%; 
    postion: fixed; 
}

.header-top {
    display: flex;
    justify-content: space-between;
    background-color: red;
}

.icons {
    display: flex; 
}

.header-bottom {
    display: flex; 
    width: 100%;
    flex-direction: column; 
    align-items: center;
    background-color: red; 
}

nav {
    width: 38%; 
}

ul {
    display: flex; 
    justify-content: space-between;
}


* {
    box-sizing: border-box; 
}

html {
    width: 100%;
    height: 100%; 
    font-family: sans-serif; 
}

body {
    position: relative;
    width: 100%; 
    height: 100%;
    font-size: 18px;
    margin: 0px;
}

.main-content {
    display: block;
}

.bg-img {
    display: block;
    left: 0px; 
    top 50px; 
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%; 
    background-color: yellow;
    position: fixed; 
    z-index: -99;
    text-align: center;
}

img {
    display: block;
    position: absolute; 
    margin: auto;
    padding: 0px; 
    border: none;
    width: 500px;
    max-height: none; 
    max-width: none;
    z-index: -9;
    top: 75px;
    left: 33%;
}