title: css image positioning center
body: <p>i have problem with positioning image</p>
  
  <pre><code>&lt;div class="foto img-thumbnail"&gt;
    &lt;img class="img-thumbnail tengah" src="member/37/foto_profile/profile37.png"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>the css file</p>
  
  <pre><code>.foto {
  background-image: url('member/37/foto_profile/large.jpeg');
  height: 300px;
  background-repeat: no-repeat;
  background-size:cover;
  background-position: 
  center center;
  width: 100%;
  }
  .tengah {
  position: absolute;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/hL0jv.png" alt="preview"></p>
  
  <p><strong>GREEN</strong> = <em>class</em> <strong>tengah</strong></p>
  
  <p><strong>RED</strong> = <em>class</em> <strong>foto</strong></p>
  
  <p>i want the image (RED) positioning center of div</p>
  
  <p>when i change css like </p>
  
  <pre><code>.tengah {
  left: 50%;
  top: 50%;
  position: absolute;
  }
  </code></pre>
  
  <p>it returning the center of image
  <img src="https://i.stack.imgur.com/M3cDv.png" alt="preview1"></p>
  
  <p>anybody can help me?</p>
  
  <p>thanks before :)</p>