title: How to position a div with equal margins for left, right, and top
body: <p>I would like to achieve a layout that looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/UyCmU.png" alt="Inner div nested in Outer div with equal margins for top, left, and right."></p>
  
  <p><strong>I am interested in a css/html only solution, so no javascript required.</strong></p>
  
  <p>The widths of both divs are dynamic, so I cannot use any static margins.</p>
  
  <p>The spacing between the sides of the divs, and the top, should be the same.</p>
  
  <p>I tried using <code>margin: auto auto 0 auto</code> on the inner div, as you can see in this <a href="http://jsfiddle.net/vivmaha/etruh09L/" rel="noreferrer">jsfiddle</a>, but it only works for left and right. </p>