title: Center a div horizontally on a page when it is constrained to an off-center limited width div
body: <p>I am working with a set HTML template that makes things a little tricky to customize exactly the way I want. So I am stuck with a structure that somewhat lacks flexibility.</p>
  
  <p>I have a div that takes up 50% width of the page, but I want to center a containing div in the middle of the page. Due to other restrictions in other parts of the page, I really can't change the parent div being set to <strong>position: relative</strong>. </p>
  
  <p><strong>This is the effect I am after:</strong>
  <img src="https://i.stack.imgur.com/B965K.png" alt="enter image description here"></p>
  
  <p><strong>This is the code I have so far (which is not working):</strong></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="parent"&gt;
      &lt;div  class="centerpage"&gt;&lt;img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Berlin_U-Bahn_Train_A3L71.jpg/220px-Berlin_U-Bahn_Train_A3L71.jpg"&gt;&lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.parent {
      background-color: #85D782;
      height: 400px;
      width: 50%;
      position: relative;
  }
  
  .centerpage {
      position: absolute;
  }
  </code></pre>